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

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>三级联动菜单</title>

<style>

select {

font-family: "萝莉体 第二版";

}

.hide {

display: none;

}

</style>

</head>

<body>

<div>

<select id="province">

<option>-请选择-</option>

</select>

<select id="city" class="hide">

<option>-请选择-</option>

</select>

<select id="area" class="hide">

<option>-请选择-</option>

</select>

</div>

<script>

var provinceList = ['北京市', '河北省', '浙江省'];

var cityList = [['东城区', '西城区', '海淀区'], ['廊坊市', '唐山市', '石家庄市', '承德市'], ['杭州市', '温州市', '宁波市', '嘉兴市', '绍兴市']];

var areasList = [

[

['东城区1', '东城区2', '东城区3'],

['西城区1', '西城区2', '西城区3'],

['海淀区1', '海淀区2', '海淀区3']

],

[

['廊坊市1', '廊坊市2', '廊坊市3', '廊坊市4'],

['唐山市1', '唐山市2', '唐山市3', '唐山市4'],

['石家庄市1', '石家庄市2', '石家庄市3', '石家庄市4'],

['承德市1', '承德市2', '承德市3', '承德市4']

],

[

['杭州市1', '杭州市2', '杭州市3', '杭州市4', '杭州市5'],

['温州市1', '温州市2', '温州市3', '温州市4', '温州市5'],

['宁波市1', '宁波市2', '宁波市3', '宁波市4', '宁波市5'],

['嘉兴市1', '嘉兴市2', '嘉兴市3', '嘉兴市4', '嘉兴市5'],

['绍兴市1', '绍兴市2', '绍兴市3', '绍兴市4', '绍兴市5']

]

];

//1.获取元素

var province = document.getElementById("province");

var city = document.getElementById("city");

var area = document.getElementById("area");

//2.给省的选择框赋值,

// ----使用自执行函数，避免污染全局变量-----

(function () {

for (var i = 0; i < provinceList.length; i++) {

var myOption = document.createElement("option");

myOption.innerHTML = provinceList[i];

//设置value值

myOption.value = i;

province.appendChild(myOption);

}

})();

//3.设置选择省的行为函数

province.onchange = function (e) {

city.style.display = "inline-block"; //设置第二个出现

while (city.children.length > 1) { //当省设置为“请选择”时，移除子元素

city.removeChild(city.lastElementChild);

}

while (area.children.length > 1) { //当市设置为“请选择”时，移除子元素

area.removeChild(area.lastElementChild);

}

if (cityList[this.value]) {//当设置为请选择时不显示列表

for (var i = 0; i < cityList[this.value].length; i++) { //添加市的列表

var myOption = document.createElement("option");

myOption.innerHTML = cityList[this.value][i];

//设置value值

myOption.value = i;

city.appendChild(myOption);

}

}

};

//4.设置选择市的行为函数

city.onchange = function (e) {

area.style.display = "inline-block"; //设置第二个出现

while (area.children.length > 1) { //当市设置为“请选择”时，移除子元素

area.removeChild(area.lastElementChild);

}

if (areasList[province.value][this.value]) {//当设置为"请选择"时不显示列表

for (var i = 0; i < areasList[province.value][this.value].length; i++) { //添加市的列表

var myOption = document.createElement("option");

myOption.innerHTML = areasList[province.value][this.value][i];

area.appendChild(myOption);

}

}

}

</script>

</body>

</html>

原生JavaScript的省市县三级联动的更多相关文章

  1. 项目总结01：JSP mysql SpringMvc下中国省市县三级联动下拉框

    JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP  mysql数据库  SpringMvc  ajax   Controller层  Service层  中国地区  省 ...

  2. 省市县三级联动js代码

    省市县三级联动菜单,JS全国省市县(区)联动代码,一般可以用于用户注册或分类信息二手交易网站,需要的朋友直接复制代码就可以用了,不过有朋友反馈说缺少某些城市,具体缺少哪个尚不知,请想用的朋友自己补全吧 ...

  3. jQuery - 全国省市县三级联动

    最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件 废话不多说,贴上代码: <!doctype html> &l ...

  4. wex5 实战 省市县三级联动与地址薄同步

    无论是商城,还是快递,都要用到省市县三级联动,和地址薄,今天就以实战来制作,难点有3个: 1:三级联动,有wex5组件实现,相对简单,实战里对行数据进行了拼接 2:  地址薄选项,利用inputSel ...

  5. 省市县三级联动 sql语句

    发现在网上的省市县三级联动大部分是mysql的.就算是sqlserver的,也不准确.于是就把mysql的给改了下,适用sqlserver.sql语句如下: CREATE TABLE Dic_Area ...

  6. Android 省市县 三级联动（android-wheel的使用）[转]

    转载:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个控件,以为 ...

  7. Android 省市县 三级联动（android-wheel的使用）

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个 ...

  8. php仿经典省市县三级联动

    之前有个需求要写个类似省市县三级联动的页面,于是,网上找了点资料看了下,其实原理很简单: 当我们选择一级栏目中某条记录的时候,会获取该栏目的vaule值,并发起ajax请求,后台根据这个vaule值, ...

  9. JavaScript实现省市区的三级联动

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

随机推荐

  1. CentOS 6下安装nodejs 0.9.0

    确保安装了python,大部分安装失败都是由于python版本过低导致.安装之前,升级python版本,升级步骤 http://www.tomtalk.net/wiki/Python. [root@S ...

  2. js 通过function来定义函数

    什么是函数: 函数是完成某一功能的代码段. 函数是可重复执行的代码段. 函数方便管理和维护. 自定义一个函数: 通过function关键字来定义一个函数. 语法:   function 函数名称([可 ...

  3. VPN ,Bypass the FIrewall

    Bypass the China Firewall Methods November 16th, 2012Posted in , Tech With their assortment of techn ...

  4. WCF SOAP

    WCF SOAP服务端解析 ASP.NET Core中间件(Middleware)进阶学习实现SOAP 解析. 本篇将介绍实现ASP.NET Core SOAP服务端解析,而不是ASP.NET Cor ...

  5. uitableview的空白处不能响应 touchesbegan 事件

    现在的uitableview 的上面  响应不了     touchesbegan 事件   可能算是苹果的一个bug吧,不知道以后会不会改变 今天试了好久  都不行  最后  写了个字类  继承自 ...

  6. 消息队列msmq

    http://q.cnblogs.com/q/26895/ 远程队列必须现在运程服务器上创建. 在 Windows Server 2008 上安装 IIS 服务和 MSMQ 功能后,系统会在 IIS  ...

  7. nodejs and socket.io and iisnode

    http://www.amazedsaint.com/2011/09/creating-10-minute-todo-listing-app-on.html http://www.cnblogs.co ...

  8. 【UVALive - 3487】 Duopoly（网络流-最小割）

    Description The mobile network market in country XYZ used to be dominated by two large corporations, ...

  9. HTML+js+css实现点击图片弹出上传文件窗口的两种思路

    第一种:CSS实现 <style><!-- .fileInputContainer{        height:256px;        background:url(upfil ...

  10. SparkSQL配置和使用初探

    1.环境 OS:Red Hat Enterprise Linux Server release 6.4 (Santiago) Hadoop:Hadoop 2.4.1 Hive:0.11.0 JDK:1 ...