二級聯動 js

2021-08-28 11:18:10 字數 1749 閱讀 3756

在html部分只寫兩個select標籤 option標籤將用js的方法寫入

onchange:內容發生改變事件  用於select下拉列表中後的內容發生改變時候的觸發

核心部分就是js裡面的內容:

建立乙個物件data來儲存資料

data =
首先通過for迴圈來新增第一級裡面的內容(province)

var pro = document.getelementbyid("province");

for(var i in data)

createelement():可建立元素節點此方法返回乙個element物件。

innerhtml在js是雙向功能:獲取物件內容 或 向物件插入內容

重中之重 func1():

向第二級標籤中新增元素

var choice = (self.options[self.selectedindex]).innerhtml;
selectedindex 獲取data物件中的索引;

var city = document.getelementbyid("city"); 

for (var i in data[choice])

此方法與之前插入的第一級的元素相同

到這裡乙個二級聯動基本就搞定了然而bug卻沒有解決

我們想要的結果時只有陝西所對應的城市但是北京的也出現了

所以接下來要去掉上一次操作的「殘害」

有兩種方法:

1.利用removechildren方法:通過for迴圈遍歷city.children來刪除city.children

var options = city.children;

for (var k=0; kremovechild():指定元素的某個指定的子節點。

注:k--每次刪除的都是第乙個元素,options的長度在發生變化所以k--;

2.dhtml有一種暴力的方法city.options.length = 0;

就可以解決這一問題

bug解決後:

搞定啦!

總結:1.用到用js的形式寫html的內容

3.解決所謂的殘骸問題.

JS控制二級聯動

在註冊頁面上有乙個下拉列表,下拉列表顯示省份資訊,有另乙個下列列表.選擇某個省份,將這個省份下的城市列出。陣列 步驟一 確定事件 onchange.步驟二 獲得改變的省份值 步驟三 比較省份的值 與 陣列中定義的值是否相等,如果相等獲得這個省份對應的所有的市的陣列.步驟四 建立option元素,將陣...

js 省市二級聯動

bootstrap jquery 省市二級聯動 html panel panel default panel body h2 id selectprovince province1 遼寧省 option province2 selected 吉林省 option province3 黑龍江省 opt...

案例 js二級聯動

這是js常用功能,比如省份和城市的聯動 這是頁面標籤 action 省份 pre select 城市 cy select form 這是資料 var provinces 請選擇省份 北京市 天津市 上海市 重慶市 江蘇省 浙江省 江西省 海南省 var citys 請選擇城市 北京市 天津市 上海市...