<!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. Ubuntu16.04 下安装tomcat

    有两种常用方法: 一.通过 apt-get 命令进行在线安装(会自动配置好环境变量和服务) 二.通过下载并解压 .tar.gz 包进行手动安装(需要手动配置环境变量) 一.通过 apt-get 命令进 ...

  2. Java中的数据类型转换

    先来看一个题: Java类Demo中存在方法func0.func1.func2.func3和func4,请问该方法中,哪些是不合法的定义?( ) public class Demo{ float fu ...

  3. LintCode2016年8月8日算法比赛----子树

    子树 题目描述 有两个不同大小的二叉树:T1有上百万的节点:T2有好几百的节点.请设计一种算法,判定T2是否为T1的子树. 注意事项 若 T1 中存在从节点 n 开始的子树与 T2 相同,我们称 T2 ...

  4. 磁贴界面颜色 Metro UI Colors

    http://www.oschina.net/p/metro-ui-colors 介绍 包含了磁贴界面(Metro UI)使用的颜色集合(浅绿色,绿色,深绿色,品红,紫色等).可以查看每一种颜色的各种 ...

  5. OFDM正交频分复用---基础入门图示

    @(162 - 信号处理) 整理转载自:给小白图示讲解OFDM 下面以图示为主讲解OFDM,以"易懂"为第一要义. 注:下面的讨论如果不做说明,均假设为理想信道. *** 一张原理 ...

  6. Python中的基础数据类型

    Python中基础数据类型 1.数字 整型a=12或者a=int(2),本质上各种数据类型都可看成是类,声明一个变量时候则是在实例化一个类. 整型具备的功能: class int(object): & ...

  7. course & time

  8. [翻译] Shimmer

    Shimmer Shimmer is an easy way to add a shimmering effect to any view in your app. It's useful as an ...

  9. 关于cocostudio动态添加控件触摸响应无效的学习

    time:2015/04/19 1. 描述 * 把studio制作的ui加载之后,动态添加事件(比如说,单点触摸),结果回调函数(eg:onTouchBegan等)根本没有响应! * 另外,网上有朋友 ...

  10. mysql 基础学习2

    1.修改表字段顺序 在 字段增加和修改语法(ADD/CHANGE/MODIFY)中,都有一个可选项first|after column_name,这个选项可以用来修改字段在表中的位置 默认ADD增加的 ...