三级联动是我们写表单时必不可少的，比如在写收货地址时，就用到他了，最近在看原生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. jquery text--val--html

    .html()用为读取和修改元素的HTML标签    对应js中的innerHTML .html()是用来读取元素的HTML内容(包括其Html标签),.html()方法使用在多个元素上时,只读取第一 ...

  2. 【实习记】2014-08-15文档太少看着源码用cgicc+stl库之模板谓词函数对象

        总结1: 今天找到了昨天scanf的问题答案,scanf与printf一样的神奇而复杂,稍不留神,就会被坑.scanf函数在读入非空白符分割的多个字符串的解决方法是这个:/* 以 | 分割 * ...

  3. 移动端日期控件 mobiscroll

    Mobiscroll是一个用于触摸设备(Android phones, iPhone, iPad, Galaxy Tab)的日期和时间选择器jQuery插件.可以让用户很方便的只需要滑动数字既可以选择 ...

  4. php批量发送短信或邮件的方案

    最近遇到在开发中遇到一个场景,后台管理员批量审核用户时候,需要给用户发送审核通过信息,有人可能会想到用foreach循环发送,一般的短信接口都有调用频率,循环发送,肯定会导致部分信息发送失败,有人说用 ...

  5. php模拟POST请求提交数据

    php模拟POST请求提交数据 1.基于fsockopen function phppost00($jsonString){ $URL='https://www.jy.com/phppostok.ph ...

  6. 2016022604 - redis命令介绍

    Redis keys命令用于在Redis的管理键. Redis keys命令使用语法如下所示: redis最新版本目前是3.0.7 redis 127.0.0.1:6379> COMMAND K ...

  7. eclipse + maven + jboss 遇到ClassNotFoundException

    在使用eclipse + maven + jboss开发过程中,碰到ClassNotFoundException, 原因应该是deployed包中未包含maven的依赖jar. 可以通过如下方法把依赖 ...

  8. [译]36 Days of Web Testing(二)

    Day 7: Http 和 Https Why? 当在网络上传输一些私人,敏感信息时,应该采用加密的手段来保证这些信息在传输的过程中不被侦测到.Https协议正是这种实现机制. Https是一种广泛使 ...

  9. Coursera《machine learning》--（2）单变量线性回归(Linear Regression with One Variable)

    本笔记为Coursera在线课程<Machine Learning>中的单变量线性回归章节的笔记. 2.1 模型表示 参考视频: 2 - 1 - Model Representation ...

  10. jquery判断邮箱格式问题

    方法一: var search_str = /^[\w\-\.]+@[\w\-\.]+(\.\w+)+$/; var email_val = $("#Email").val(); ...