1.首先在body頁面中定義好對應(yīng)的select多選菜單并且定義對應(yīng)的id便于選擇器選擇
在selelct下option中給與value定義參照值便于之后的循環(huán)迭代。
<body>
省份:<select id="provence">
<option value="0" name="provence">--請選擇--</option>
<option value="1" name="provence">河南省</option>
<option value="2" name="provence">安徽省</option>
<option value="3" name="provence">江蘇省</option>
<option value="4" name="provence">河北省</option>
<option value="5" name="provence">湖南省</option>
</select>
城市:<select id="city">
<option value="0" name="city">--請選擇--</option>
</select>
</body>
2.定義一個二維數(shù)組用來裝城市的集合堪藐。并通過基本選擇器找到對應(yīng)的標(biāo)簽元素匀哄,拿到對應(yīng)標(biāo)簽元素后通過之前定義的value值作為參照迭代出對應(yīng)的二維數(shù)組的城市內(nèi)容。(期間一定要記得每次迭代前清空一次市級中的內(nèi)容抱究,防止內(nèi)容疊加)
$(function () {//入口函數(shù)
//獲得城市對象的下拉框
var $city = $("#city");
// 創(chuàng)建二維數(shù)組來表示城市恢氯,注意對應(yīng)關(guān)系
var citys = [
["--請選擇--"],
["商丘市", "鹿邑縣", "許昌市", "開封市", "鄭州市"],
["合肥市", "淮南市", "馬鞍山市", "六安市", "亳州市"],
["南京市", "蘇州市", "揚州市"],
["滄州市", "泊頭市", "天津市"],
["長沙市", "岳陽市", "衡陽市","株洲市","邵陽市"]
];
$("#provence").change(function () {
console.log($city.get(0));
$city.get(0).length = 0;
var val = this.value;
console.log(val);
$.each(citys, function (i, n) {//代表二維數(shù)組的下標(biāo),代表二維數(shù)組中更具體的內(nèi)容
if (val == i) { //判斷
$(n).each(function (j, m) {//j代表每個二維數(shù)組中一維數(shù)組內(nèi)容的下表鼓寺,m代表一維數(shù)組的內(nèi)容
//創(chuàng)建對象勋拟,并且添加到城市下拉框中
$city.append("<option name='city'>" + m + "</option>")
});
}
});
});
});