JavaScript实现省市区的三级联动

 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 <title>Insert title here</title>
 </head>
 <body>
 <div id="div1">
 </div>
 <script type="text/javascript">
     /* 创建省 */
     var provinceAr = ["湖北省","吉林省","湖南省"];
     var province = document.createElement("select");
     var province_one = document.createElement("option");
     var province_one_value = document.createTextNode("请选择省");
     province_one.appendChild(province_one_value);
     province.appendChild(province_one);
     document.getElementById("div1").appendChild(province);
     for(var i = 0; i < provinceAr.length; i++){
         province_one = document.createElement("option");
         province_one_value = document.createTextNode(provinceAr[i]);
         province_one.appendChild(province_one_value);
         province.appendChild(province_one);
     }
     /* 创建市 */
     var cityAr = [
                   ["襄阳市","武汉市","荆门市","恩施市"],
                   ["长春市","四平市","松原市"],
                   ["长沙市","岳阳市","益阳市"],
                   ];
     province.id = "proi";//给省添加id
     var city = document.createElement("select");
     document.getElementById("div1").appendChild(city);
     var city_one = document.createElement("option");
     var city_one_value = document.createTextNode("请选择市");
     city_one.appendChild(city_one_value);
     city.appendChild(city_one);
     city.id="cityI";//给市添加id
     /* 创建县 */
     var townAr = [
                 [
                      ["樊城区","襄州区","襄城区"],
                      ["江汉区","汉阳区","武昌区"],
                      ["京沙县","沙洋县","东宝区"],
                      ["舞阳坝街道","小渡船街道","六角亭街道"]
                  ],
                 [
                      ["南关区 ","朝阳区","宽城区"],
                      ["铁东区","铁西区","梨树县"],
                      ["宁江区","乾安县","长岭县"]
                  ],
                 [
                      ["长沙县 ","宁乡县","浏阳市"],
                      ["湘阴县","岳阳县","华容县"],
                      ["安化","桃江","南县"]
                  ]
                 ];
     var town = document.createElement("select");
     var town_one = document.createElement("option");
     var town_one_value = document.createTextNode("请选择县");
     town_one.appendChild(town_one_value);
     town.appendChild(town_one);
     document.getElementById("div1").appendChild(town);
     /* onchange拼写出错可能导致进程终止*/
     province.onchange = function(){
         var index = document.getElementById("proi").selectedIndex;//给select一个索引值
         city.innerHTML="";
         if(index==0){
             var city_one = document.createElement("option");
             var city_one_value = document.createTextNode("请选择市");
             city_one.appendChild(city_one_value);
             city.appendChild(city_one);
             town.innerHTML="";
             var town_one = document.createElement("option");
             var town_one_value = document.createTextNode("请选择县");
             town_one.appendChild(town_one_value);
             town.appendChild(town_one);
         }
         else
         {
             var cityValues = cityAr[index-1];
             var townValu = townAr[index-1];//townValu为一个二维数组
             console.log(cityValues);
             console.log(townValu);
             for(var i = 0; i < cityValues.length; i++){
                 var city_one = document.createElement("option");
                 var city_one_value = document.createTextNode(cityValues[i]);
                 city_one.appendChild(city_one_value);
                 city.appendChild(city_one);
             }
             var tor = townValu[0];
             console.log(tor);
             town.innerHTML="";
             for(var i = 0; i < tor.length; i++)
             {
             var town_one = document.createElement("option");
             var town_one_value = document.createTextNode(tor[i]);
             town_one.appendChild(town_one_value);
             town.appendChild(town_one);
             }
             city.onchange=function(){
                 var indexc = document.getElementById("cityI").selectedIndex;
                 var townVa = townValu[indexc];
                 town.innerHTML="";
                 console.log(townVa);
                 for(var i = 0; i < townVa.length; i++)
                 {
                 var town_one = document.createElement("option");
                 var town_one_value = document.createTextNode(townVa[i]);
                 town_one.appendChild(town_one_value);
                 town.appendChild(town_one);
                 }
             }
         }
     }
 </script>
 </body>
 </html>

调试

备注

  1. .innerHTML=" "的作用是为了清空select下的option样式，若不清空可能会导致select索引值发生改变

参考链接

http://www.w3school.com.cn/xmldom/met_document_createelement.asp（createElement() 方法）

http://www.w3school.com.cn/jsref/prop_option_index.asp（HTML DOM index属性）

JavaScript实现省市区的三级联动的更多相关文章

  1. 省市区(县)三级联动代码（js 数据源）

    ylbtech-JavaScript-Utility:省市区(县)三级联动代码(js 数据源) 省市区(县)三级联动代码(js 数据源) 1.A,源代码(Source Code)返回顶部 1.A.1, ...

  2. JQuery实现省市区的三级联动

    JQuery实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...

  3. js之省市区(县)三级联动效果

    省市区(县)三级联动效果,是我们软件开发比较常用的,特别是对一些crm,erp之类,当然也包括其他的后台管理系统,基本都涉及到,今天贴出这个常用的,方便个人复用和大家使用 <!DOCTYPE h ...

  4. 中国省市区地址三级联动jQuery插件 案例下载

    中国省市区地址三级联动jQuery插件 案例下载 distpicker 是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. 安装 可以通过npm ...

  5. 中国省市区地址三级联动插件---jQuery Distpicker

    插件描述:distpicker是一款可以实现中国省市区地址三级联动jQuery插件.它使用简单,简单设置即可完成中国省市区地址联动效果. [官网]https://fengyuanchen.github ...

  6. 省市区js三级联动（原创）

    看了一些网上的js三级联动,但感觉不是缺这,就是少那,决定亲自操刀写了一个,现记录如下,以备后用! <!DOCTYPE html> <html> <head> &l ...

  7. 转: javascript实现全国城市三级联动菜单代码

    <html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...

  8. 原生JavaScript的省市县三级联动

    三级联动是我们写表单时必不可少的,比如在写收货地址时,就用到他了,最近在看原生JavaScript,从基础写起,待完善,以后再写个jquery版的. <!DOCTYPE html> < ...

  9. 用php和ajax写一个省市区的三级联动，实现地区的下拉选择

    要实现这个页面的三级联动,我们需要建立三个php文件,第一个php文件我们导入jQuery文件,里面嵌入JavaScript:第二个php文件我们做一个php的处理页面,里面引入我们封装好的数据库类文 ...

随机推荐

  1. handoop安装部署集群

    hdfs 1.0版本 一个namenode (secordary namenode 2.0冷备份) 和多个datanode构成分布式文件系统 mapreduce 一个 jobtracker 协调 ta ...

  2. Vuejs——（13）组件——杂项

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

  3. Mac 下 软件安装路径查看 命令： Which， 估计Linux 也是

    ✘ marikobayashi@juk  ~  which git /usr/bin/git marikobayashi@juk  ~  which maven maven not found ...

  4. Go语言数据类型

    目录 基本数据类型说明 整型 浮点型 字符 字符类型本质探讨 布尔型 字符串 指针 值类型与引用类型 基本数据类型默认值 基本数据类型相互转换 注意事项 其他基本类型转string类型 string类 ...

  5. Android-如何显示版本号并制作3秒跳转页

    前言 大家好,给大家带来Android-如何显示版本号并制作3秒跳转页的概述,希望你们喜欢 软件技术人员,时代作者,从 Android 到全栈之路,我相信你也可以!阅读他的文章,会上瘾!You and ...

  6. LabVIEW（十一）：条件结构的巧用

    一.LabVIEW中条件结构使用起来并不是那么简便,主要体现在两点: 1.由隧道的产生引起的一些问题.(当箭头停留在隧道处时不显示为“自动索引隧道”,所以此隧道非彼隧道) 2.由多层结构判断引起的不易 ...

  7. Swift5 语言指南(十二) 属性

    属性将值与特定类,结构或枚举相关联.存储的属性将常量和变量值存储为实例的一部分,而计算属性则计算(而不是存储)值.计算属性由类,结构和枚举提供.存储的属性仅由类和结构提供. 存储和计算属性通常与特定类 ...

  8. lombok的介绍及使用

    参考:https://blog.csdn.net/motui/article/details/79012846 介绍 在项目中使用Lombok可以减少很多重复代码的书写.比如说getter/sette ...

  9. 通过Postman进行post请求时传递X-XSRF-TOKEN

    前言介绍 这段时间一个项目后端用的是laravel.在写API接口时通过Postman6进行测试.但是在测试后形式的接口时laravel自带了CSRF验证机制.这就很尴尬了... 所以我们的目的在使用 ...

  10. C# log4net 使用

    利用log4net写入异常类日志,在网上搜索一阵之后便想记录下来,以便后期使用,同时希望帮到大家.  第一步:使用管理NuGet程序包导入log4net.dll 导入成功后会在引用下显示相应的log4 ...