<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js 三级分类联动下拉</title>
</head>
<body>
<div class="select_wrap">
<span>省：</span>
<select id="province">
<option value="">请选择</option>
</select>
<span>市：</span>
<select id="city">
<option value="">请选择</option>
</select>
<span>区/县：</span>
<select id="county">
<option value="">请选择</option>
</select>
</div>
<script>
var data = {
"北京市": {
"市辖区": ["东城区", "西城区", "朝阳区", "丰台区", "石景山区", "海淀区"]
},
"河北省": {
"石家庄市": ["长安区", "桥西区", "新华区", "井陉矿区", "裕华区", "赞皇县"],
"唐山市": ["路南区", "路北区", "古冶区", "开平区", "丰南区", "丰润区",],
"秦皇岛市": ["海港区", "山海关区", "北戴河区", "抚宁区", "青龙满族自治县"],
"邯郸市": ["邯山区", "丛台区", "复兴区", "峰峰矿区", "肥乡区", "永年区"],
"衡水市": ["桃城区", "冀州区", "枣强县", "武邑县", "武强县", "饶阳县"]
},
"湖南省": {
"长沙市": ["芙蓉区", "天心区", "岳麓区"],
"株洲市": ["荷塘区", "芦淞区", "石峰区"],
"湘潭市": ["雨湖区", "岳塘区", "湘潭县"],
"衡阳市": ["珠晖区", "雁峰区", "石鼓区"],
},
"广东省": {
"广州市": ["荔湾区", "越秀区", "海珠区", "天河区"],
"韶关市": ["武江区", "浈江区", "曲江区", "始兴县"],
"深圳市": ["罗湖区", "福田区", "南山区", "宝安区"],
"珠海市": ["香洲区", "斗门区", "金湾区"],
}
};
var eProvince = document.getElementById('province');
var eCity = document.getElementById('city');
var eCounty = document.getElementById('county');
for(let k in data){
//创建option元素
let eOption = document.createElement('option');
//设置option元素的值为数据中“省”的名称
eOption.value = k;
eOption.innerHTML = k;
//把option依次加入到eProvince下拉框中
eProvince.appendChild(eOption);
}
eProvince.addEventListener('change',event=>{
//获取当前选择的省份值
let value = eProvince.value;
//修改省份后，城市和区/县下拉框中原有的值都会修改，直接通过修改eCity和eCounty元素innerHTML来初始化值
eCity.innerHTML = eCounty.innerHTML = '<option value="">请选择</option>';
//判断是否选择了省份
if(value!=''){
//在数据中遍历省份对应的城市
for(let k in data[value]){
//创建option元素
let eOption = document.createElement('option');
//设置option元素的值为数据中“城市”的名称
eOption.value = k;
eOption.innerHTML = k;
//把option依次加入到eCity下拉框中
eCity.appendChild(eOption);
}
}
});
//城市改变时，把对应的数据放到区/县下拉框中
eCity.addEventListener('change',event=>{
//获取已选择的省份值
let sProvince = eProvince.value;
//获取当前选择的城市值
let sCity = eCity.value;
//找到对应城市数据
let arr = data[sProvince][sCity];
//初始化eCounty元素中原有的值
eCounty.innerHTML = '<option value="">请选择</option>';
//判断是否选择的是城市名，而不是选择“请选择”
if(sCity!=''){
//遍历城市中对应的区/县数据
for(let i=0;i<arr.length;i++){
//创建option元素
let eOption = document.createElement('option');
//设置option元素的值为数据中“区/县”的名称
eOption.value = arr[i];
eOption.innerHTML = arr[i];
//把option依次加入到eCounty下拉框中
eCounty.appendChild(eOption);
}
}
});
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<title>二级联动</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
<SCRIPT LANGUAGE="JavaScript">
var china = [
{
"p_name": "吉林省",
"p_id": "jl",
"cities": [
{
"c_name": "长春",
"c_id": "cc"
},
{
"c_name": "四平",
"c_id": "sp"
},
{
"c_name": "通化",
"c_id": "th"
},
{
"c_name": "松原",
"c_id": "sy"
}
]
},
{
"p_name": "辽宁省",
"p_id": "ln",
"cities": [
{
"c_name": "沈阳",
"c_id": "sy"
},
{
"c_name": "大连",
"c_id": "dl"
},
{
"c_name": "抚顺",
"c_id": "fs"
},
{
"c_name": "铁岭",
"c_id": "tl"
}
]
},
{
"p_name": "山东省",
"p_id": "sd",
"cities": [
{
"c_name": "济南",
"c_id": "jn"
},
{
"c_name": "青岛",
"c_id": "qd"
},
{
"c_name": "威海",
"c_id": "wh"
},
{
"c_name": "烟台",
"c_id": "yt"
}
]
},
{
"p_name": "上海市",
"p_id": "sh",
"cities": [
{
"c_name": "闵行区",
"c_id": "mh"
},
{
"c_name": "徐汇区",
"c_id": "xh"
},
{
"c_name": "黄浦区",
"c_id": "hp"
},
{
"c_name": "浦东新区",
"c_id": "pd"
}
]
}
];
</SCRIPT>
<body>
<select id="province" name="province">
<option value="none">--请选择省--</option>
</select>
<select id="city" name="city">
<option value="none">--请选择市--</option>
</select>
<!-- 载入省市数据 -->
<script type="text/javascript" src="cities.js"></script>
<script type="text/javascript" >
//获得省级下拉框对象
var province = document.getElementById("province");
//遍历省市数据,并把里面省的数据追加到option选项中
for (var i=0; i<china.length; i++) {
var option = document.createElement("option");
option.value = china[i].p_id;
option.innerHTML = china[i].p_name;
province.appendChild(option);
}
//省级下拉框发生改变事件
province.onchange = function() {
//获取当前点击对象的值
var proid = this.value;
var cities;
//遍历省市数据,把省级下点击的那一个选项的值和省市数据中的
//省级数据对比,如果相等,取出当前的市的数据
for (var i=0; i<china.length; i++) {
if (proid == china[i].p_id) {
cities = china[i].cities;
}
}
//获得市级下拉框对象
var city = document.getElementById("city");
//每次点击省级后,市级初始化,避免高级重复追加
city.innerHTML = "<option value='none'>--请选择市--</option>";
//遍历市级数据,并取出市级数据,追加到市级对象中
for (var i=0; i<cities.length; i++) {
var option = document.createElement("option");
option.innerHTML = cities[i].c_name;
option.value = cities[i].c_id;
city.appendChild(option);
}
}
</script>
</body>
</html>
