<!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. 关于 PHPMailer 邮件发送类的使用心得（含多文件上传）

    This is important for send mail PHPMailer 核心文件 class.phpmailer.php class.phpmaileroauth.php class.ph ...

  2. 利用PHP QR Code生成二维码（带logo）

    转自:http://www.cnblogs.com/txw1958/p/phpqrcode.html HP QR Code是一个PHP二维码生成类库,利用它可以轻松生成二维码,官网提供了下载和多个演示 ...

  3. js 数据监听--对象的变化

    class Observer { constructor(data) { this.data = data; this.filterObj(data); } static isObject(obj) ...

  4. SpringBoot整合mybatis——配置mybatis驼峰命名规则自动转换

    一.简述 mybatis驼峰式命名规则自动转换: 使用前提:数据库表设计按照规范“字段名中各单词使用下划线"_"划分”: 使用好处:省去mapper.xml文件中繁琐编写表字段列表 ...

  5. FineReport和泛微OA(Ecology)的单点登录集成方案

    最近出现了很多关于帆软报表和泛微OA的集成问题,均出现在“单点登录”上.直接也有相关的文章介绍一些FineReport和泛微集成的背景.价值等,以及FineReport和OA的深度集成的方案,但是并没 ...

  6. Android 弹出框Dialog并缩放图片

    java代码 Activity: // 调用dialog,参数:1:自身的activity,2:Bitmap bm读取好的图片 MyDialog dialog = new MyDialog(MyAct ...

  7. 为订阅内虚拟机批量安装并配置 Microsoft Anti-Malware 扩展

    本文提供了对订阅内的 Windows 经典部署虚拟机和资源管理器部署虚拟机执行批量安装并配置 Microsoft Anti-Malware 扩展的 PowerShell 脚本. 关于安装 Window ...

  8. SSM框架——实现分页和搜索分页

    登录|注册     在路上 在路上,要懂得积累:在路上,要学会放下:我在路上!Stay hungry,Stay foolish.       目录视图 摘要视图 订阅 [公告]博客系统优化升级     ...

  9. Delphi XE7功能之TMultiView

    TMultView,做为一个TPanel来显示控件,可通过属性Mode来控制TMultView的显示效果,如下拉或者以抽屉方式.从屏一侧象抽屉一样显示TMultView,但不会转换主屏,也就是说在主窗 ...

  10. [翻译] IQAudioRecorderController

    IQAudioRecorderController IQAudioRecorderController is a drop-in universal library allows to record ...