<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

 </head>

 <body>

     <select id="province">

         <option value="0">北京</option>

         <option value="1">上海</option>

         <option value="2">天津</option>

         <option value="3">重庆</option>

         <option value="4">河北</option>

         <option value="5">山西</option>

         <option value="6">内蒙古</option>

         <option value="7">辽宁</option>

         <option value="8">吉林</option>

         <option value="9">黑龙江</option>

         <option value="10">江苏</option>

         <option value="11">浙江</option>

         <option value="12">安徽</option>

         <option value="13">福建</option>

         <option value="14">江西</option>

         <option value="15">山东</option>

         <option value="16">河南</option>

         <option value="17">湖北</option>

         <option value="18">湖南</option>

         <option value="19">广东</option>

         <option value="20">广西</option>

         <option value="21">海南</option>

         <option value="22">四川</option>

         <option value="23">贵州</option>

         <option value="24">云南</option>

         <option value="25">西藏</option>

         <option value="26">陕西</option>

         <option value="27">甘肃</option>

         <option value="28">宁夏</option>

         <option value="29">青海</option>

         <option value="30">新疆</option>

         <option value="31">香港</option>

         <option value="32">澳门</option>

         <option value="33">台湾</option>

     </select>

     <select name="" id="city">

     </select>

     <script>

         let cities = new Array();

         cities[0] = "东城,西城,崇文,宣武,朝阳,丰台,石景山,海淀,门头沟,房山,通州,顺义,昌平,大兴,平谷,怀柔,密云,延庆";

         cities[1] = "黄浦,卢湾,徐汇,长宁,静安,普陀,闸北,虹口,杨浦,闵行,宝山,嘉定,浦东,金山,松江,青浦,南汇,奉贤,崇明";

         cities[2] = "和平,东丽,河东,西青,河西,津南,南开,北辰,河北,武清,红挢,塘沽,汉沽,大港,宁河,静海,宝坻,蓟县";

         cities[3] = "万州,涪陵,渝中,大渡口,江北,沙坪坝,九龙坡,南岸,北碚,万盛,双挢,渝北,巴南,黔江,长寿,綦江,潼南,铜梁,大足,荣昌,壁山,梁平,城口,丰都,垫江,武隆,忠县,开县,云阳,奉节,巫山,巫溪,石柱,秀山,酉阳,彭水,江津,合川,永川,南川";

         cities[4] = "石家庄,邯郸,邢台,保定,张家口,承德,廊坊,唐山,秦皇岛,沧州,衡水";

         cities[5] = "太原,大同,阳泉,长治,晋城,朔州,吕梁,忻州,晋中,临汾,运城";

         cities[6] = "呼和浩特,包头,乌海,赤峰,呼伦贝尔盟,阿拉善盟,哲里木盟,兴安盟,乌兰察布盟,锡林郭勒盟,巴彦淖尔盟,伊克昭盟";

         cities[7] = "沈阳,大连,鞍山,抚顺,本溪,丹东,锦州,营口,阜新,辽阳,盘锦,铁岭,朝阳,葫芦岛";

         cities[8] = "长春,吉林,四平,辽源,通化,白山,松原,白城,延边";

         cities[9] = "哈尔滨,齐齐哈尔,牡丹江,佳木斯,大庆,绥化,鹤岗,鸡西,黑河,双鸭山,伊春,七台河,大兴安岭";

         cities[10] = "南京,镇江,苏州,南通,扬州,盐城,徐州,连云港,常州,无锡,宿迁,泰州,淮安";

         cities[11] = "杭州,宁波,温州,嘉兴,湖州,绍兴,金华,衢州,舟山,台州,丽水";

         cities[12] = "合肥,芜湖,蚌埠,马鞍山,淮北,铜陵,安庆,黄山,滁州,宿州,池州,淮南,巢湖,阜阳,六安,宣城,亳州";

         cities[13] = "福州,厦门,莆田,三明,泉州,漳州,南平,龙岩,宁德";

         cities[14] = "南昌市,景德镇,九江,鹰潭,萍乡,新馀,赣州,吉安,宜春,抚州,上饶";

         cities[15] = "济南,青岛,淄博,枣庄,东营,烟台,潍坊,济宁,泰安,威海,日照,莱芜,临沂,德州,聊城,滨州,菏泽";

         cities[16] = "郑州,开封,洛阳,平顶山,安阳,鹤壁,新乡,焦作,濮阳,许昌,漯河,三门峡,南阳,商丘,信阳,周口,驻马店,济源";

         cities[17] = "武汉,宜昌,荆州,襄樊,黄石,荆门,黄冈,十堰,恩施,潜江,天门,仙桃,随州,咸宁,孝感,鄂州";

         cities[18] = "长沙,常德,株洲,湘潭,衡阳,岳阳,邵阳,益阳,娄底,怀化,郴州,永州,湘西,张家界";

         cities[19] = "广州,深圳,珠海,汕头,东莞,中山,佛山,韶关,江门,湛江,茂名,肇庆,惠州,梅州,汕尾,河源,阳江,清远,潮州,揭阳,云浮";

         cities[20] = "南宁,柳州,桂林,梧州,北海,防城港,钦州,贵港,玉林,南宁地区,柳州地区,贺州,百色,河池";

         cities[21] = "海口,三亚";

         cities[22] = "成都,绵阳,德阳,自贡,攀枝花,广元,内江,乐山,南充,宜宾,广安,达川,雅安,眉山,甘孜,凉山,泸州";

         cities[23] = "贵阳,六盘水,遵义,安顺,铜仁,黔西南,毕节,黔东南,黔南";

         cities[24] = "昆明,大理,曲靖,玉溪,昭通,楚雄,红河,文山,思茅,西双版纳,保山,德宏,丽江,怒江,迪庆,临沧";

         cities[25] = "拉萨,日喀则,山南,林芝,昌都,阿里,那曲";

         cities[26] = "西安,宝鸡,咸阳,铜川,渭南,延安,榆林,汉中,安康,商洛";

         cities[27] = "兰州,嘉峪关,金昌,白银,天水,酒泉,张掖,武威,定西,陇南,平凉,庆阳,临夏,甘南";

         cities[28] = "银川,石嘴山,吴忠,固原";

         cities[29] = "西宁,海东,海南,海北,黄南,玉树,果洛,海西";

         cities[30] = "乌鲁木齐,石河子,克拉玛依,伊犁,巴音郭勒,昌吉,克孜勒苏柯尔克孜,博 尔塔拉,吐鲁番,哈密,喀什,和田,阿克苏";

         cities[31] = "香港";

         cities[32] = "澳门";

         cities[33] = "台北,高雄,台中,台南,屏东,南投,云林,新竹,彰化,苗栗,嘉义,花莲,桃园,宜兰,基隆,台东,金门,马祖,澎湖";

         let city = document.getElementById('city');

         let province = document.getElementById('province');

         function cit() {

             let i = province.value;

             let ne = cities[i].split(',');

             for (let j = 0; j < ne.length; j++) {

                 let o = new Option(`${ne[j]}`)

                 city.options.add(o);

             }

         }

         cit();

         province.onchange = function () {//获取province中选中的value值

             city.options.length = 0;//清空选中的值

             let i = province.value;//将选中的value值保存在i中

             let ne = cities[i].split(',');//将字符串变为数组

             for (let j = 0; j < ne.length; j++) {//将cities数组便利出来

                 let o = new Option(`${ne[j]}`)//创建option

                 city.options.add(o);//添加option

             }

         }

     </script>

 </body>

 </html>

用javascript编写地区表单ES6的更多相关文章

  1. javascript自动填写表单小技巧

    javascript自动填写表单小技巧 在平时开发过程中,或者在访问某些站点,经常要频繁地填写一大堆表单时,我们可以利用javascript,写一段脚本,预先把要填的信息准备好,然后模拟点击按钮的动作 ...

  2. jQuery用面向对象的思想来编写验证表单的插件

    本人的重点是怎么构建一个简单有效可扩展的jQuery表单验证插件,这篇文章没有教你怎么用 validate plugin.我们的重点在学习一些jQuery,Javascript面向对象编程的知识. 下 ...

  3. JavaScript 小实例 - 表单输入内容检测，对页面的增删改

    JavaScript 小实例 - 表单输入内容检测,对页面的增删改 效果体验地址:https://xpwi.github.io/js/JavaScript01/jsForm.html 功能: 1.向页 ...

  4. JavaScript：基础表单验证

    在用户填写表单的过程之中,往往需要编写一堆的验证操作,这样就可以保证提交的数据时正确的.那么下面就模拟表单验证的处理操作完成. 如果要想进行验证,首先针对于输入的数据来进行一个验证处理. 1.定义一个 ...

  5. 【HTML相关】iframe+javascript实现一个表单提交后多个处理文件按序处理

    最近在弄一个网页的问题,总结如下. [问题描述] 页面中包括以下几个部分:1)表单form,供用户输入图片文件:2)iframe1,显示a.php文件的内容,a.php接收客户端图片并保存,后台程序处 ...

  6. 使用JavaScript 实现注册表单的校验

    说明:在点击提交时进行表单校验,具体要求如下: 1)用户名为3~16个字符,且不能包含”@”和”#”字符: 2)密码和校验密码必须一致,且长度在8个字符到16个字符: 3)兴趣爱好至少选择一项: 4) ...

  7. JavaScript检测提交表单text合法

    近日,一朋友开设了地方性质的论坛,让我帮他处理下Login.php(所谓的用户的登陆页面),但是登陆的时候,出现空字符或敏感字符,需要提交到服务端的Script处理,大大降低了效率,于是乎,就有了此代 ...

  8. javascript基础 之 表单

    1,js可以验证表单 实例1,js获取表单的内容 //html表单是这样的 <form name="myForm" action="demo_form.php&qu ...

  9. JavaScript—异步提交表单的6种方式

    FormData的详细介绍及使用请点击此处,那里对FormData的方法和事件已经表述的非常清楚,这里就不再浪费时间在介绍一遍了.本文主要针对FormData对象的使用以及异步文件上传进行详细的说明. ...

随机推荐

  1. MyEclipse打包带源码的jar包

    平时开发中,我们喜欢将一些类打包成jar包,然后在别的项目中继续使用,不过由于看不到jar包里面的类的源码了,所以也就无法调试,要想调试,那么就只能通过关联源代码的形式,这样或多或少也有一些不方便,今 ...

  2. Grunt入门学习之(1) -- 环境安装

    Grunt入门学习(1) - 环境安装 这周根据项目需要,在项目的基础上分模块开发了一个小的项目板块,但是在规范组织每个模块的代码和其依赖性时比较麻烦,需要一个项目板块的构建工具.各个模块都包括其对应 ...

  3. Android浮动按钮

    https://www.jianshu.com/p/18cbc862ba7b https://github.com/yhaolpz/FloatWindow 这样就解决了切换 Activity 时悬浮控 ...

  4. Redis安装和部署--LINUX

    一.安装 1.下载3.0.7稳定版本即可 地址:http://www.redis.cn/download.html 2.将 redis-3.0.7.tar.gz 压缩包拷贝到 opt 目录下 3.解压 ...

  5. Ubuntu桌面显示超大，现在显示不全

    按住alt可以自由拖动窗口或者滚动鼠标滚动轮,整体放大缩小桌面把窗口拖动到显示设置然后调整菜单和标题栏缩放比例

  6. ls 操作命令 -l/-R和rm -r dir 功能实现

    ls -R #include <sys/stat.h> #include <dirent.h> #include <fcntl.h> #include <st ...

  7. models的单表操作

    orm创建数据库 from django.db import models # Create your models here. class Book(models.Model): name = mo ...

  8. [转发]CPU个数、CPU核心数、CPU线程数

    我们在选购电脑的时候,CPU是一个需要考虑到核心因素,因为它决定了电脑的性能等级.CPU从早期的单核,发展到现在的双核,多核.CPU除了核心数之外,还有线程数之说,下面文本就来解释一下CPU的核心数与 ...

  9. Gdb调试工具/ Makfile项目管理

    gdb调试工具 gcc -g main.c -o main 常用命令 命令            简写         作用 help                h            按模块列 ...

  10. codeforces 414D Mashmokh and Water Tanks

    codeforces 414D Mashmokh and Water Tanks 题意 题解 \(a_i\):第 \(i\) 层的结点个数. \(b_i\):第 \(i\) 层初始有水的结点个数. 如 ...