JS实现省市县三级下拉联动
纯JS实现省市县三级下拉联动，供大家参考，具体内容如下
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市县三级下拉联动-李康</title>
<style>
fieldset{
width: 25%;
border: 1px dashed black;
}
legend{
margin-left: 135px;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>地址信息</legend>
请选择居住地：<br><br>
<select id="province" οnchange="chooseProvince(this)">
<option value="1">--请选择省--</option>
</select>
<select id="city" οnchange="chooseCity(this)">
<option value="2">--请选择市--</option>
</select>
<select id="area">
<option value="3">--请选择区--</option>
</select>
</fieldset>
</form>
<script>
var provinceList = [{
name: '北京',
cityList: [
{ name: '市辖区', areaList: ['东城区', '西城区', '崇文区', '宣武区', '朝阳区', '丰台区', '石景山区', '海淀区', '门头沟区', '房山区', '通州区', '顺义区', '昌平区', '大兴区', '怀柔区', '平谷区'] },
{ name: '县', areaList: ['密云县', '延庆县'] }]
},{
name: '河南',
cityList: [
{ name: '郑州市', areaList: ['市辖区', '中原区', '二七区', '管城回族区', '金水区', '上街区', '邙山区', '中牟县', '巩义市', '荥阳市', '新密市', '新郑市', '登封市'] },
{ name: '开封市', areaList: ['市辖区', '龙亭区', '顺河回族区', '鼓楼区', '南关区', '郊 区', '杞 县', '通许县', '尉氏县', '开封县', '兰考县'] },
{ name: '洛阳市', areaList: ['市辖区', '老城区', '西工区', '廛河回族区', '涧西区', '吉利区', '洛龙区', '孟津县', '新安县', '栾川县', '嵩 县', '汝阳县', '宜阳县', '洛宁县', '伊川县', '偃师市'] },
{ name: '新乡市', areaList: ['市辖区', '红旗区', '卫滨区', '凤泉区', '牧野区', '新乡县', '获嘉县', '原阳县', '延津县', '封丘县', '长垣县', '卫辉市', '辉县市'] },
{ name: '焦作市', areaList: ['市辖区', '解放区', '中站区', '马村区', '山阳区', '修武县', '博爱县', '武陟县', '温 县', '济源市', '沁阳市', '孟州市'] }]
},{
name: '湖北',
cityList: [
{ name: '武汉市', areaList: ['市辖区', '江岸区', '江汉区', '乔口区', '汉阳区', '武昌区', '青山区', '洪山区', '东西湖区', '汉南区', '蔡甸区', '江夏区', '黄陂区', '新洲区'] },
{ name: '黄石市', areaList: ['市辖区', '黄石港区', '西塞山区', '下陆区', '铁山区', '阳新县', '大冶市'] },
{ name: '十堰市', areaList: ['市辖区', '茅箭区', '张湾区', '郧 县', '郧西县', '竹山县', '竹溪县', '房 县', '丹江口市'] }]
}
];
var provinceArray = new Array();
var cityArray = new Array();
var areaArray = new Array();
var provinceTag = document.getElementById("province");
var cityTag = document.getElementById("city");
var areaTag = document.getElementById("area");
window.onload = function(){ //用window的onload事件，窗体加载完毕的时候
var provinceTag = document.getElementById("province");
var cityTag = document.getElementById("city");
var areaTag = document.getElementById("area");
for (var i = 0; i < provinceList.length; i++) {
var province = provinceList[i]; //获取省
var provinceName = province.name; //获取省名
console.log(provinceName);
provinceArray[i] = provinceName;
provinceTag.add(new Option(provinceName, i));
//通过Option方法将省名与下标对应，再将名字放到provinceTag中
}
}
//建立省市之间的连接
function chooseProvince(th) {
var provinceTag = document.getElementById("province");
var cityTag = document.getElementById("city");
var areaTag = document.getElementById("area");
var index = th.selectedIndex - 1; //“请选择省” 占了一个索引，所以需要减1
var provinceName = provinceArray[index]; //获取省名
for (var n = 0; n < provinceList.length; n++) {
var provice = provinceList[n];
console.log(provice.name == provinceName); //控制台打印方便观看
if (provice.name == provinceName) { //开始建立连接，通过if判断，前提是要满足if中的条件
cityList = provice.cityList; //通过province的cityList获取城市列表
cityTag.innerHTML = ""; //保证city为所选中的省的市
console.log(cityList); //控制台打印
for (var c = 0; c < cityList.length; c++) {
var city = cityList[c]; //获取城市
var cityName = city.name; //获取城市名
cityArray[c] = cityName;
cityTag.add(new Option(cityName, c)); //使用Option()方法获取每一个索引对应的数据，然后使用add()方法存入到数组中去，创建省市连接
}
}
}
}
// 建立市县之间的连接
function chooseCity(ci) {
var provinceTag = document.getElementById("province");
var cityTag = document.getElementById("city");
var areaTag = document.getElementById("area");
var index = ci.selectedIndex;
var cityName = cityArray[index];//获取城市名
for (var j = 0; j < cityList.length; j++) {
var city = cityList[j];//获取城市
if (city.name == cityName) {
var areaList = city.areaList;//县级列表数据
areaTag.innerHTML = "";
for (var k = 0; k < areaList.length; k++) {
var area = areaList[k];//获取县
areaTag.add(new Option(area, k));
}
}
}
}
</script>
</body>
</html>
效果如下
如果大家还想深入学习，可以点击jquery下拉框效果汇总、JavaScript下拉框效果汇总进行学习。
以上就是javascript实现省市区三级联动下拉框菜单的全部代码，希望对大家的学习有所帮助。
相关推荐
-
JS实多级联动下拉菜单类，简单实现省市区联动菜单！
作者:ybcola 这段js代码是很久以前的作品了,应该在一年以前吧!当时是在做一个农村人才管理系统的时候遇到的问题,因为系统要求参选择并通过后台添加省市区县甚至到乡镇村队,而在对人才的信息进行修改时要求用下拉列表进行选择,并且每个人才来源可能是省市,或者省市区县,或者一直取队都要选择!那时第一反映就是找网上是否有现成的代码,找到一个最常用的就是省市二级联动,那时那段js代码在网上随处可见,可是拿过来对我来说没用,因为我需要的是一个多级联通并且可以自由扩展的代码!最终还是自己动手写了JS代码.
-
js实现的下拉框二级联动效果
本文实例讲述了js实现的下拉框二级联动效果.分享给大家供大家参考,具体如下: <script language="JavaScript" type="text/javascript"> <!-- /* * 说明:将指定下拉列表的选项值清空 * 转自:Gdong Elvis ( http://www.gdcool.net ) * * @param {String || Object]} selectObj 目标下拉选框的名称或对象,必须 */ fun
-
全国省市二级联动下拉菜单 js版
本文实例为大家分享了js实现二级联动下拉菜单的具体代码,供大家参考,具体内容如下 js代码部分: /* * 全国二级城市联动 js版 */ function Dsy(){ this.Items = {}; } Dsy.prototype.add = function(id,iArray){ this.Items[id] = iArray; } Dsy.prototype.Exists = function(id){ if(typeof(this.Items[id]) == "undefined&
-
最简单js代码实现select二级联动下拉菜单
本文实例为大家分享了js实现select二级联动下拉菜单,供大家参考,具体内容如下 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.
-
JS实现的简单下拉框联动功能示例
本文实例讲述了JS实现的简单下拉框联动功能.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head
-
jsp从数据库获取数据填充下拉框实现二级联动菜单的方法
本文实例讲述了jsp从数据库获取数据填充下拉框实现二级联动菜单的方法.分享给大家供大家参考,具体如下: 项目告一段落,现在将遇到的比较实用的东西记录下来,写了多遍了,谨记于此,以备查看! 1.首先在数据库中获取第一个下拉框的数据: <s:select listKey="tsFrom" id="t_tsfrom" cssClass="required" listValue="tsFrom" cssStyle="w
-
js实现的全国省市二级联动下拉选择菜单完整实例
本文实例讲述了js实现的全国省市二级联动下拉选择菜单.分享给大家供大家参考.具体如下: 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-province-city-cho-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-
-
jquery+json 通用三级联动下拉列表
Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-03-10 02:03 Blog: http://shaoyun.cnblogs.com/ 用Jquery实现,原始代码只支持IE,这里我改了一下,我的代码里面有三个版本的实现 第一个是通过读取XML构建,支持IE/firefox,chrome不支持,有兴趣的可以将读取XML的部分改成AJAX的方式,这样chrome支持就不成问题 第二个是采用Json数据格式构建,是我的第二次尝试改进
-
javascript实现省市区三级联动下拉框菜单
本文实例讲述了javascript实现省市区三级联动下拉框菜单代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title> <!-- 使用QQ的省市区数据 --> <!-- <script type="text/javascript" src="http:/
-
省市区三级联动下拉框菜单javascript版
实现省市区三级下拉列表框,并且要实现联动效果. 方法一: 1.视图代码 <select class="prov" id="prov5" name="Province" data-code="@Model.Province"> </select> <select class="city" id="city5" name="City" dat