jQuery中实现省市联动

r囧r小猫 2021-09-18 23:04 340阅读 0赞

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
    		<style type="text/css">
    			
    		</style>
    		<script type="text/javascript">
    			var provinceArr = new Array(5);
    			provinceArr[0]=new Array("北京市");
    			provinceArr[1]=new Array("郑州市","洛阳市","濮阳市","驻马店市");
    			provinceArr[2]=new Array("石家庄市","唐山","秦皇岛","邯郸");
    			provinceArr[3]=new Array("西安市","宝鸡市","延安");
    			provinceArr[4]=new Array("菏泽市","济南市","青岛");
    			
    			$(function(){
    				$("#province").change(function(){
    					$("#city").empty();
    					var provinceID = this.value;
    					console.log(provinceID);
    					if(provinceID==-1){
    						$("#city").html("<option value=\"-1\">-请选择-</option>");
    					}else{
    						
    						for(var i = 0;i<provinceArr[provinceID].length;i++){
    							var option = document.createElement("option");
    							option.innerText=provinceArr[provinceID][i];
    							$("#city").append(option);
    						}
    					}
    				});
    			});
    			
    		</script>
    	</head>
    	<body>
    		<select id="province">
    			<option value="-1">-请选择-</option>
    			<option value="0">北京市</option>
    			<option value="1">河南省</option>
    			<option value="2">河北省</option>
    			<option value="3">陕西省</option>
    			<option value="4">山东省</option>
    		</select>
    		<select id="city">
    			<option value="-1">-请选择-</option>
    		</select>
    	</body>
    </html>

![20190414092852798.gif][]

[20190414092852798.gif]: /images/20210725/dc7f7b0b508a4af09e6b0739d51e2764.png