下拉列表左右選擇 DOM

2021-07-29 18:09:22 字數 1387 閱讀 8988

選項1

選項2選項3

選項4選項5

選項6選項7

選中新增到右邊》

全部新增到右邊》

選項8《選中刪除到左邊

《全部刪除到左邊

* 思路:把select1的option(被選中),加入到select中。

* select標籤上有預設值

* selected== true,說明被中

* 獲取select1下面所有的option物件

* 先獲取select1

* 再獲取select1下所有的子節點

* 迴圈遍歷,拿到每乙個,判斷selected屬性,如果是true,加入select2中。

* 雙擊事件

* ondblclick

// 把左邊選中的條目新增到右邊

document.getelementbyid("add").onclick = trunright;

// 全部新增到右邊

document.getelementbyid("add_all").onclick = trunallleft;

// 從右邊新增到左邊

document.getelementbyid("remove").onclick = trunleft;

// 全不從右邊新增到左邊

document.getelementbyid("remove_all").onclick = trunallright;

//雙擊:左邊到右邊

document.getelementbyid("select2").ondblclick = trunleft;

//雙擊:右邊到左邊

document.getelementbyid("select1").ondblclick = trunright;

function trunright()

} }

function trunleft()

} }

function trunallleft() {

// 獲取select2

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

// 獲取select1

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

// 獲取select1下所有的子節點

var options = select1.getelementsbytagname("option");

// 迴圈遍歷

for(var i=0;i

補充:五級省市聯動:

iOS 下拉列表選擇

ios下拉列表選擇 下拉展開列表選擇 import typedef ns enum nsuinteger,itemtype ns assume nonnull begin inte ce item uibutton property nonatomic,assign nsinteger index ...

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

建立新節點 document.createelement div document.createattribute class document.createtextnode 文字 e.innerhtml document.createcomment 注釋內容 document.createdocu...

日期選擇下拉列表小控制項

using system using system.componentmodel using system.text using system.web using system.web.ui using system.web.ui.webcontrols assembly tagprefix efp...