JS級聯下拉列表,DOM程式設計

2021-07-07 06:02:42 字數 1935 閱讀 7125

建立新節點

document.createelement(『div』)

document.createattribute(『class』);

document.createtextnode(『文字』) e.innerhtml

document.createcomment(『注釋內容』);

document.createdocumentfragment();

把新節點新增到元素樹
e.setattributenode(newattr)

e.insertbefore(newtxt/newelement/fragment, existingchild)

刪除已有節點
var deletedchild = parentnode.removechild( existingchild );
替換已有節點
var replacedchild = parentnode.replacechild( newchild,  existingchild );
刪除屬性節點

element.removeattribute(『屬性名』);

省市級聯下拉h2>

id="provinces"

onchange='changecity(this.value)'>

value="-1">--請選擇--option>

select>

id="citys">

value="-1">--請選擇--option>

select>

var ps = ['北京市','天津市','河北省'];

var cs = [

['東城區','西城'],

['河東區','和平區'],

['廊坊市','石家莊市','唐山市']

];var fragment = document.createdocumentfragment();

for(var i=0; ivar option = document.createelement('option');

option.setattribute('value', i);

option.innerhtml = ps[i];

}//新增地級市

function

changecity

(pno)

//刪除下拉框中已有的地級市

var cselect = document.getelementbyid('citys');

while(cselect.children.length>0)

/*cselect.innerhtml = '';*/

//再新增當前指定省份中的地級市

var cityarr = cs[pno];

var fragment = document.createdocumentfragment();

for(var i=0; ivar option = document.createelement('option');

option.setattribute('value', i);

option.innerhtml = cityarr[i];}}

script>

body>

html>

**可直接實現如圖效果。

級聯下拉列表

下拉列表,同步 charset utf 8 title type text j ascript var provinces 安徽 江蘇 浙江 山東 var cities 合肥 蕪湖 蚌埠 安慶 南京 蘇州 無錫 徐州 杭州 寧波 溫州 金華 濟南 青島 煙台 日照 var provselnode v...

js下拉列表二級聯動

學了js也有一段時間了,今天把js中較為重要的下拉列表二級聯動記錄一下。所謂二級聯動,就是要通過乙個下拉列表的選擇從而在另乙個select下拉列表中顯示出對應的資料。好比我有兩個下拉列表,第一列表是選擇省份,那麼我選擇某乙個省份,那麼另乙個列表也會對應顯示該省份的城市。如上圖所示,我選擇了河北省,那...

JS AJAX 實現級聯下拉列表

實現在下拉框的級聯查詢,可以使得使用者不進行頁面跳轉便可以根據下拉框中所選的高階選項更改低階選項的內容。增進使用者體驗 以省市縣 區為例,在使用者選擇不同的省時,更新後面的市和對應的縣 區 在使用者選擇不同的市時,更新後面縣 區的內容。這裡我們僅演示如何實現下拉框的級聯查詢,所以省略了action屬...