省市二级联动/JQuary

原创于 2019-01-19 20:16:27 发布 · 422 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#JQuary

js前端同时被 2 个专栏收录

6 篇文章

订阅专栏

JQuary

3 篇文章

订阅专栏

本文介绍了一种使用HTML和JavaScript实现省市联动下拉框的方法。通过预定义的省份和城市数组，为省份下拉框添加选项，并在省份选择变化时，动态更新城市下拉框。适用于网页表单中需要地区选择的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

思路:
省市联动,我们肯定要先拿到省份的select对象,然后将我们的省份值赋给下拉框,通过option.然后给省份下拉框绑定一个点击事件,得到城市select对象,通过省份的数组索引得到对应的城市数组对象,通过遍历将对应城市赋给城市select对象.
如有问题,欢迎来扰,可能我描述的不甚清楚,期待补充,祝大家身体健康,事业顺利
先贴代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>省市联动</title>
	</head>
	<body>
		籍贯:
				<select id="pro">
					<option value="">-请选择-</option> 	
				</select>
				<select id="city">
					<option>-请选择-</option> 	
				</select>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
	<script type="text/javascript">
		// 定义省份的数据
		var proList = ["北京","山西","山东","河北","河南"];
		// 定义城市的数据
		var cityList = [
           ["东城区","西城区","朝阳区","丰台区","海淀区","昌平区"],
           ["太原市","大同市","运城市","临汾市","忻州市","晋中市"],
           ["济南市","青岛市","威海市","烟台市","临沂市","德州市"],
           ["石家庄市","邢台市","保定市"],
           ["郑州市","焦作市","三门峡市"],
         ];
         
         
         // 给省份下拉框赋值
         for (var i = 0; i < proList.length; i++) {
         	// 定义opt对象
         	var opt = "<option>" + proList[i] + "</option>";
         	// 将opt下拉选项追加到select标签中最后
         	$("#pro").append(opt);
         }
         
         /*给省份下拉框绑定改变事件*/
        $("#pro").change(function(){
        	// 得到当前选中项的索引   
        	var index = this.selectedIndex;
        	console.log(index);
        	// 获取省份对应的城市列表
        	var cityArr = cityList[index-1];
        	// 将城市下拉框中的下拉选项删除（除了第一个）
        	$("#city option:gt(0)").remove();
        	// 判断数组是否为空
        	if (cityArr != null && cityArr.length > 0) {
        		// 将城市数组填充到城市下拉框中
	        	for (var i = 0; i < cityArr.length; i++) {
		         	// 定义opt对象
		         	var opt = "<option>" + cityArr[i] + "</option>";
		         	// 将opt下拉选项追加到select标签中最后
		         	$("#city").append(opt);
		        }
        	}
        	
        });
        
		
	</script>
</html>

然后上图:
在这里插入图片描述