三级联动是我们写表单时必不可少的，比如在写收货地址时，就用到他了，最近在看原生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. 生产者与消费者（二）---await与 signal

    前面阐述了实现生产者与消费者问题的一种方式:wait() / notify()方法,本文继续阐述多线程的经典问题---生产者与消费者的第二种方式:await() / signal()方法. await ...

  2. ueditor之ruby on rails 版

    最近公司的项目开始要使用ueditor了,但是ueditor却没有提供rails的版本,因此需要自己去定制化ueditor来满足项目的需求.不多说了,先简要说明下使用方法: ueditor目录下: 注 ...

  3. ibatis面试笔记

    ibatis是在结果集与实体类之间进行映射hibernate是在数据库与实体类之间进行映射Hibernate是一个开放源代码的对象关系映射框架,它对JDBC进行了非常轻量级的对象封装,使得Java程序 ...

  4. Window 下安装Redis

    下载地址:https://github.com/dmajkic/redis/downloads. 下载到的Redis支持32bit和64bit.根据自己实际情况选择,将64bit的内容cp到自定义盘符 ...

  5. favicon.ico的使用方法

    favicon.ico怎么来,就自己决定了. 虽说是放在网站根目录下就行了, 但最好是放在网站images目录下,方便统一管理. 然后在head.tpl.php 中的<head></ ...

  6. iOS+Swift: 使用MessageUI.framework发送短信

    在iOS中, 可以使用MessageUI.framework框架发送短信, 步骤如下: 代码下载http://git.oschina.net/yao_yu/swift_cnblogs_samples/ ...

  7. string与char* 互相转换以及周边问题

    先插一个小知识点 string str = "abc" str += 'd'; cout<<str<<endl;  //"abcd"   ...

  8. JSON和XML的比较

    整理日: 2015/4/5 ◆可读性 JSON和XML的可读性可谓不相上下,一边是简易的语法,一边是规范的标签形式,很难分出胜负. ◆可扩展性 XML天生有很好的扩展性,JSON当然也有,没有什么是X ...

  9. golang入门-- 一个2D的图形库学习

    此库叫gg,源码在github. 1.获取源码并安装到本地: 首先要安装git (传送门)  :   https://git-scm.com/download/ 然后就可以通过  go get 命令从 ...

  10. PHP 7 探针的安装与测试

    首先,这是一篇软文,没错!就是一篇软文.因为我知道「PHP 是世界上最好的语言」,所以我相信很多人愿意读这篇用户帮忙写的软文,因为这篇软文应该能帮助 PHP 开发的同学一点小忙.我们是一家成立了7年的 ...