<!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. stm32f10x单片机进阶--spi使用

      使用SPI与外部flash(MX25L6406EM21)IC通信 连接方式                    如上图所示,MCU通过SPI2与外部flash芯片进行相连接. MCU spi2初 ...

  2. BZOJ3625: 小朋友和二叉树

    传送门 Sol 设 \(f_x\) 表示权值为 \(x\) 的二叉树的个数 设 \(s_x\) 表示是否有 \(x\) 这种权值可以选择 那么 \[f_n=\sum_{i=0}^{n}\sum_{j= ...

  3. kindeditor之video插件开发

    KindEditor是一套开源的HTML可视化编辑器,主要用于让用户在网站上获得所见即所得编辑效果.不仅结构小巧,而且功能强大,最主要的是它采用插件的开发管理方式,能很容易再它的基础上添加插件来实现自 ...

  4. spring 与springmvc容器的关系

    spring容器是springmvc的父容器,而父容器是不能访问子容器中的东西,但子容器可以访问父容器的东西

  5. ubuntu16下面 redis 无法链接到客户端问题

    1.今天从github上面下载了一个项目,链接到自己的tomcat里面的redis,结果在虚拟机里面可以链接成功,但是在客户端总是提示链接失败.google之后,原来是 因为 需要在redis里面设置 ...

  6. IIS7 使用server farms 进行负载均衡

    1.首先,到微软官网下载web平台安装程序: https://www.microsoft.com/web/downloads/ 2.安装好后,会在IIS里有这个图标: 3.双击这个图标:安装 4.安装 ...

  7. git操作合集

    目录 安装 下载 本地配置 创建用户凭证ssh 忽略文件 基础操作 新建仓库 克隆仓库 获取更新 推送更新 查看历史 版本回退 分支 别名 linux服务器 疑难问题 清除历史大文件 安装 下载 下载 ...

  8. 自动化测试基础篇--Selenium unittest生成测试报告（HTMLTestRunner）

    如何生成HTMLTestRunner测试报告.接上篇文章,对于unittest框架,运行后,测试结果不便于查看,同时多个case存在的时候,可能会导致case result记录不正确的情况. 为此,引 ...

  9. Linux学习---Linux安装ftp组件

    1 安装vsftpd组件 安装完后,有/etc/vsftpd/vsftpd.conf 文件,是vsftp的配置文件. [root@bogon ~]# yum -y install vsftpd 2 添 ...

  10. namespace 相关

    #include <iostream>using namespace std;namespace first{ int var = 5;}namespace second{ double ...