1.什么是省市聯(lián)動(dòng)蜕青？
其實(shí)在我們的日常生活中有許多省市聯(lián)動(dòng)的例子瘟栖，省市聯(lián)動(dòng)主要是應(yīng)用在表單項(xiàng)中钧敞，也就是注冊(cè)時(shí)的資料填寫(xiě)列蜡豹。當(dāng)我們?cè)谔顚?xiě)自己的住址時(shí)，一般會(huì)有一個(gè)下拉列表當(dāng)我們點(diǎn)擊下拉框中的省份時(shí)溉苛，后一個(gè)下拉框就會(huì)出現(xiàn)你所選擇的省份的下級(jí)城市镜廉。這就是我們所說(shuō)的省市聯(lián)動(dòng)。
2.如何實(shí)現(xiàn)省市聯(lián)動(dòng)愚战？
-
那么我們要怎樣實(shí)現(xiàn)這個(gè)功能呢娇唯？其實(shí)很簡(jiǎn)單齐遵。首先我們要先要?jiǎng)?chuàng)建兩個(gè)select表單。<body>中的內(nèi)容如下：
...<select onchange="selectCity(this.value)"> <option value="0">湖北</option> <option value="1">湖南</option> <option value="2">河北</option> <option value="3">河南</option> </select> <select id="city"> </select>
...
- 接下來(lái)我們就要開(kāi)始Javascript部分的代碼編寫(xiě)了塔插，我們首先定義一個(gè)數(shù)組用來(lái)存貯城市信息：
...
var cities = new Array(4);//定義一個(gè)數(shù)組存儲(chǔ)城市
cities[0] = new Array("武漢市", "黃岡市", "襄陽(yáng)市", "荊州市");
cities[1] = new Array("長(zhǎng)沙市", "株洲市", "岳陽(yáng)市","邵陽(yáng)市");
cities[2] = new Array("石家莊市", "邯鄲市", "廊坊市", "保定市");
cities[3] = new Array("安陽(yáng)市", "洛陽(yáng)市", "開(kāi)封市", "安陽(yáng)市");
...
- 我們?cè)谥暗牡谝粋€(gè)select標(biāo)簽中定義了一個(gè)點(diǎn)擊事件的方法梗摇，我們現(xiàn)在開(kāi)始編寫(xiě)方法部分：
...
function selectCity(value) {
//獲取第二個(gè)下拉框
var cityEle = document.getElementById("city");
//清空第二個(gè)下拉框的內(nèi)容
cityEle.options.length = 0;
//遍歷二維數(shù)組中的省份
for (var i = 0; i < cities.length; i++) {
//判斷遍歷用戶(hù)選擇的省份下的城市
if (value == i) {
for (var j = 0; j < cities[i].length; j++) {
var textNode = document.createTextNode(cities[i][j]);
var opEle = document.createElement('option');
opEle.appendChild(textNode);
//將option添加到第二個(gè)下拉列表中去
cityEle.appendChild(opEle);
}
}
}
}
...
-
這樣我們的代碼就編寫(xiě)完畢了，讓我們來(lái)看看最終的成果吧：
捕獲.PNG 當(dāng)我們點(diǎn)擊湖南省想许，再點(diǎn)擊后面的下拉框時(shí)伶授，該下拉框就會(huì)顯示出湖南省的下級(jí)城市。點(diǎn)擊其他省份也是一樣的效果流纹，會(huì)根據(jù)你點(diǎn)擊的省份顯示不同城市糜烹，這就是我們所說(shuō)的省市級(jí)聯(lián)效果啦。
-
結(jié)語(yǔ)：長(zhǎng)路漫漫漱凝，唯鍵作伴疮蹦。希望這篇文章對(duì)你有所幫助，感謝您的閱讀碉哑。
