javaScript 实现省市级联

2301_80178539

已于 2024-05-19 20:21:47 修改

阅读量231

点赞数 3

文章标签： javascript 开发语言编辑器

于 2024-05-19 20:17:52 首次发布

本文链接：https://blog.csdn.net/2301_80178539/article/details/139047684

版权

点击省份出现对应的市区，用数组实现，创建一个一维数组放置省份数值，创建一个二维数组放置市区


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="img/jquery-3.7.1.min.js"></script>
		<script>
			  var pro=["河南","山东","黑龙江"];
        var city=[["郑州","开封","新政","濮阳","平顶山","洛阳","三门峡"]
,["济南","日照","烟台","德州","聊城"]
        ,["哈尔滨","齐齐哈尔","佳木斯","牡丹江"]];
			
	$(function (){//页面搭建完成之后执行
	for(var i=0;i<pro.length;i++){

       //初始化省份 
$("#ads").append($("<option>").val(i+1).html(pro[i]));

	}
				
$("#ads").click(function (){
	           //获取当前选择的省份的索引 我们上面初始化省份的时候通过.val()赋值
var j=$(this).val()-1;
             //清空市区原有的数据
 $("#ads1").prop("length",1);

for(var v=0;v<city[j].length;v++){  
          //和前面一样通过上面获取的省份索引来初始化市区
	 $("#ads1").append($("<option>").val(v+1).html(city[j][v]));
					
				}
					
					
				});
			
			});
		</script>
	</head>
	<body>
		<select id="ads">
			<option >省份</option>
			
		</select>
		<select id="ads1">
			<option>市区</option>
			
		</select>
	</body>
</html>