三级联动是我们写表单时必不可少的，比如在写收货地址时，就用到他了，最近在看原生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. 去掉Visual Studio 编辑器里中文注释的红色波浪线 转载

    我们通常用visual studio进行开发的时候,我们通常会用到一款比较流行比较方便的插件,那就是Visual Assist X,它可以增强Microsoft开发环境下的编辑能力,支持C/C++,C ...

  2. Jquery效果之固定不动的块

    好多页面都有用到这种效果,大概就是不论页面上下如何滚动,固定不动的元素不随页面滚动,代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...

  3. Php会员权限

    <?phpecho $uu=@array_sum(@$_POST['gr']);?><form action="" method="POST" ...

  4. [python]文本处理1.2

    1.0初步完成了文本截取需要信息的处理 1.1 修复了格式所造成的遗漏字符 1.2 去除了遗漏字符中的多余字符 bug-文本test14 有遗漏字符 bug-修复的遗漏字符中含有\n 未被识别为换行符

  5. WPF布局容器综合展示

    Border控件,以及几个重要要的属性:Background:背景的 Brush 对象BorderBrush:用来绘制边框BorderThickness: Border 边框的宽度,设置边框每一边的线 ...

  6. WebApi(二)-重新封装返回结果

    先创建要返回的结果类型: /// <summary> /// 返回类型 /// </summary> public class ApiResultModel { private ...

  7. Java实现http服务器（一）

    基于Java实现Http服务器有多种多样的方法 一种轻量级的方式是使用JDK内置的com.sun.net.httpserver包下和sun.net.httpserver包下类提供的方法构建,该方法轻便 ...

  8. iOS版 hello，world版本2

    // // main.m // Hello // // Created by lishujun on 14-8-28. // Copyright (c) 2014年 lishujun. All rig ...

  9. poj 3667 Hotel

    昨天学习了线段树的延迟标记: 发现自己还有区间合并没有学: 抓紧时间学习一下: 代码: #include<cstdio> #include<algorithm> #define ...

  10. 浅谈C# .Net技术面试 ， 正在找工作的人一定要看看

    1.引子 最近一直在负责.net(B/S方向)技术面试相关的工作,前前后后面试了不少人,但是通过率较低,大概只有20%左右:有颇多感慨. 最近也一直比较困惑,原因究竟是什么? 是我们要求太高,应聘者本 ...