<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>省市联动</title>
<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
<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>
省市联动
1、选择器
2、添加事件
$("#province").change(
funtion(){
}
);
3、清空下拉列表
$("#city").empty();
