三级联动是我们写表单时必不可少的，比如在写收货地址时，就用到他了，最近在看原生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. 逻辑回归：使用SGD(Stochastic Gradient Descent)进行大规模机器学习

    Mahout学习算法训练模型 mahout提供了许多分类算法,但许多被设计来处理非常大的数据集,因此可能会有点麻烦.另一方面,有些很容易上手,因为,虽然依然可扩展性,它们具有低开销小的数据集.这样一个 ...

  2. ZOJ 3725 Painting Storages（DP+排列组合）

    题目链接:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5048 Sample Input 4 3 Sample Output ...

  3. linux创建守护进程

    守护进程deamon 是一个后台进程,无需用户输入就能运行,用来在系统后台提供某种服务. 常见的守护进程有Wbe服务器.邮件服务器以及数据库服务器等等.守护进程不能控制终端,所以任何的输入和输出都需要 ...

  4. 通过javascript实现页面的横竖屏固定

    javascript是不能固定页面是横屏还是竖屏的,但是我们可以通过另外一种思路来监听window.orientation状态,假设我们要固定页面为横屏显示,则当window.orientation返 ...

  5. linux上配置subversion服务器端安装配置并使用svn，windows本地检出,设置同步更新服务器的钩子

    参考http://my.oschina.net/junn/blog/164041 http://songxj.blog.51cto.com/620981/396113 http://5iwww.blo ...

  6. 《JavaScript高级程序设计 第3版》-学习笔记-3

    P84-P137页, 这一章看的真久,这个月事太多了.有些内容在代码注释里没提出来了 1.JS强大的数组类型,元素类型任意,提供了非常多的操作数组的方法和属性 /* 数组类型 */ //stack v ...

  7. jquery前端性能优化（持续添加。。。）

    1.选择器的使用 (1)$('#id')   使用id来定位dom元素是性能最高的方法.jQuery底层将直接调用本地方法document.getElementById().如果id直接可以找到所要对 ...

  8. QQ登录接口（第三方登录接口）

    CI框架 QQ接口(第三方登录接口PHP版) 本帖内容较多,大部分都是源码,要修改的地方只有一个,其他只要复制过去,就可以完美运行.本帖主要针对CI框架,不用下载SDK,按我下面的步骤,建文件,复制代 ...

  9. sublime text 2代码片段（Snippet）功能的使用

    “snippet”在英语里面是“片段”的意思.当我们编码时候,通常想要打几个简略的字符串,就出来一些固定的模板. 例如:使用snippet在新建文件时快速生成HTML头部信息等. 定义很简单,菜单:t ...

  10. Python正则表达式2