当前位置:首页 > 网站 > 正文

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>
<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>


更新时间 2023-11-28

有话要说...