思路:
省市聯動,我們肯定要先拿到省份的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>
然後上圖:
