二級聯動--js
阿新 • • 發佈：2018-12-12
在html部分只寫兩個select標籤 option標籤將用js的方法寫入
onchange:內容發生改變事件 用於select下拉選單中後的內容發生改變時候的觸發
<body>
<select id="province" onchange="func1(this)">
</select>
<select id="city"></select>
</body>核心部分就是js裡面的內容：
建立一個物件data來儲存資料
data = {"河北省":["邯鄲","廊坊"],"北京":["海淀","朝陽"],"陝西":["延安","西安"]}
首先通過for迴圈來新增第一級裡面的內容（province）
var pro = document.getElementById("province"); for(var i in data){ var option_pro = document.createElement("option"); //建立option標籤 oprtion_pro.innerHTML = i; //將data裡面的物件插入到id位置 pro.appendChild(option_pro); //將元素新增到option裡面 }
createElement():可建立元素節點此方法返回一個Element物件。
appendChild():可向節點的子節點列表的末尾新增新的子節點。
innerHTML在JS是雙向功能：獲取物件內容 或 向物件插入內容
重中之重 func1():
向第二級標籤中新增元素
1.獲取data物件中的province元素：
var choice = (self.options[self.selectedIndex]).innerHTML;
selectedIndex 獲取data物件中的索引；
2.通過for迴圈將city元素插入：
var city = document.getElementById("city"); for (var i in data[choice]){ var option_city = document.createElement("option"); option_city.innerHTML = data[choice][i]; city.appendChild(option_city); }
此方法與之前插入的第一級的元素相同
到這裡一個二級聯動基本就搞定了然而bug卻沒有解決
我們想要的結果時只有陝西所對應的城市但是北京的也出現了
所以接下來要去掉上一次操作的“殘害”
有兩種方法：
1.利用removeChildren方法：通過for迴圈遍歷city.Children來刪除city.Children
var options = city.children;
for (var k=0; k<options.length;k++){
city.removeChild(options[k]);
k--;
}removeChild():指定元素的某個指定的子節點。
注：k--每次刪除的都是第一個元素，options的長度在發生變化所以k--；
2.DHTML有一種暴力的方法
city.options.length = 0;就可以解決這一問題
bug解決後：
搞定啦！
總結：1.用到用js的形式寫html的內容
2.HTML DOM的使用（createElement(),appenfChild(),removeChild(),selectedIndex()）方法.
3.解決所謂的殘骸問題.