溫馨提示×

溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊×
其他方式登錄
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》

JavaScript實(shí)現(xiàn)省市聯(lián)動(dòng)效果

發(fā)布時(shí)間：2020-05-09 18:05:16 來源：億速云 閱讀：271 作者：Leah 欄目：web開發(fā)

這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)省市聯(lián)動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下。

【HTML中的DOM操作】

一些常用的 HTML DOM 方法：

getElementById(id) - 獲取帶有指定 id 的節(jié)點(diǎn)（元素）

appendChild(node) - 插入新的子節(jié)點(diǎn)（元素）

removeChild(node) - 刪除子節(jié)點(diǎn)（元素）

一些常用的 HTML DOM 屬性：

innerHTML - 節(jié)點(diǎn)（元素）的文本值

parentNode - 節(jié)點(diǎn)（元素）的父節(jié)點(diǎn)

childNodes - 節(jié)點(diǎn)（元素）的子節(jié)點(diǎn)

attributes - 節(jié)點(diǎn)（元素）的屬性節(jié)點(diǎn)

查找節(jié)點(diǎn)：

getElementById() 返回帶有指定 ID 的元素。

getElementsByTagName() 返回包含帶有指定標(biāo)簽名稱的所有元素的節(jié)點(diǎn)列表（集合/節(jié)點(diǎn)數(shù)組）。

getElementsByClassName() 返回包含帶有指定類名的所有元素的節(jié)點(diǎn)列表。

增加節(jié)點(diǎn)：

createAttribute() 創(chuàng)建屬性節(jié)點(diǎn)。

createElement() 創(chuàng)建元素節(jié)點(diǎn)。

createTextNode() 創(chuàng)建文本節(jié)點(diǎn)。

insertBefore() 在指定的子節(jié)點(diǎn)前面插入新的子節(jié)點(diǎn)。

appendChild() 把新的子節(jié)點(diǎn)添加到指定節(jié)點(diǎn)。

刪除節(jié)點(diǎn)：

removeChild() 刪除子節(jié)點(diǎn)。

replaceChild() 替換子節(jié)點(diǎn)。

修改節(jié)點(diǎn)：

setAttribute() 修改屬性

setAttributeNode() 修改屬性節(jié)點(diǎn)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*動(dòng)態(tài)添加 :   <p>文本</p> */
function dianwo(){
var div = document.getElementById("div1");
//創(chuàng)建元素節(jié)點(diǎn)
var p = document.createElement("p");  // <p></p>
//創(chuàng)建文本節(jié)點(diǎn)
var textNode = document.createTextNode("文本內(nèi)容");//  文本內(nèi)容
//將p 和文本內(nèi)容關(guān)聯(lián)起來
p.appendChild(textNode);  //  <p>文本</p> 
//將P添加到目標(biāo)div中
div.appendChild(p);
}
</script>
</head>
<body>
<input type="button" value="點(diǎn)我,添加P" onclick="dianwo()" />
<!--一會(huì)動(dòng)態(tài)的往這個(gè)Div中添加節(jié)點(diǎn)-->
<div id="div1">
</div>
</body>
</html>

代碼實(shí)現(xiàn)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
準(zhǔn)備工作 : 準(zhǔn)備數(shù)據(jù)
*/
var provinces = [
["深圳市","東莞市","惠州市","廣州市"],
["長沙市","岳陽市","株洲市","湘潭市"],
["廈門市","福州市","漳州市","泉州市"]
];
/*
1. 確定事件:  onchange
2. 函數(shù): selectProvince()
3. 函數(shù)里面要搞事情了
得到當(dāng)前操作元素
得到當(dāng)前選中的是那一個(gè)省份
從數(shù)組中取出對應(yīng)的城市信息
動(dòng)態(tài)創(chuàng)建城市元素節(jié)點(diǎn)
添加到城市select中
*/
function selectProvince(){
var province = document.getElementById("province");
//得到當(dāng)前選中的是哪個(gè)省份
//alert(province.value);
var value = province.value;
//從數(shù)組中取出對應(yīng)的城市信息
var cities = provinces[value];
var citySelect = document.getElementById("city");
//清空select中的option
citySelect.options.length = 0;
for (var i=0; i < cities.length; i++) {
//alert(cities[i]);
var cityText = cities[i]; 
//動(dòng)態(tài)創(chuàng)建城市元素節(jié)點(diǎn)   <option>東莞市</option>
//創(chuàng)建option節(jié)點(diǎn)
var option1 = document.createElement("option"); // <option></option>
//創(chuàng)建城市文本節(jié)點(diǎn)
var textNode = document.createTextNode(cityText) ;// 東莞市
//將option節(jié)點(diǎn)和文本內(nèi)容關(guān)聯(lián)起來
option1.appendChild(textNode);  //<option>東莞市</option>
//添加到城市select中
citySelect.appendChild(option1);
}
}
</script>
</head>
<body>
<!--選擇省份-->
<select onchange="selectProvince()" id="province">
<option value="-1">--請選擇--</option>
<option value="0">廣東省</option>
<option value="1">湖南省</option>
<option value="2">福建省</option>
</select>
<!--選擇城市-->
<select id="city"></select>
</body>
</html>

JavaScript實(shí)現(xiàn)省市聯(lián)動(dòng)效果

看完上訴內(nèi)容，你們掌握J(rèn)avaScript實(shí)現(xiàn)省市聯(lián)動(dòng)效果的方法了嗎？如果想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手