在雙重列表框中移動項目

Question

如何在ASP.NET中使用JavaScript將項目從一個列表框控件移動到另一個列表框控件？

Answer 1

此代碼假定你有一個錨或將觸發移動點擊時：

document.getElementById('moveTrigger').onclick = function() { 

    var listTwo = document.getElementById('secondList'); 
    var options = document.getElementById('firstList').getElementsByTagName('option'); 

    while(options.length != 0) { 
     listTwo.appendChild(options[0]); 
    } 

} 

Answer 2

如果你很樂意使用jQuery，它非常非常簡單。

$('#firstSelect option:selected').appendTo('#secondSelect'); 

其中#firstSelect是選擇框的ID。

我已經包含在這裏工作的例子：

http://jsbin.com/aluzu（編輯：http://jsbin.com/aluzu/edit）

Answer 3

庫無關的溶液：

function Move(inputControl) 
{ 
    var left = document.getElementById("Left"); 
    var right = document.getElementById("Right"); 
    var from, to; 
    var bAll = false; 
    switch (inputControl.value) 
    { 
    case '<<': 
    bAll = true; 
    // Fall through 
    case '<': 
    from = right; to = left; 
    break; 
    case '>>': 
    bAll = true; 
    // Fall through 
    case '>': 
    from = left; to = right; 
    break; 
    default: 
    alert("Check your HTML!"); 
    } 
    for (var i = from.length - 1; i >= 0; i--) 
    { 
    var o = from.options[i]; 
    if (bAll || o.selected) 
    { 
     from.remove(i); 
     try 
     { 
     to.add(o, null); // Standard method, fails in IE (6&7 at least) 
     } 
     catch (e) 
     { 
     to.add(o); // IE only 
     } 
    } 
    } 
} 

HTML

<select id="Left" multiple="multiple" size="10"> 
    <option>Some</option> 
    <option>List</option> 
    <option>Of</option> 
    <option>Items</option> 
    <option>To</option> 
    <option>Move</option> 
    <option>Around</option> 
</select> 

<div id="Toolbar"> 
    <input type="button" value="&gt;" onclick="Move(this)"/> 
    <input type="button" value="&gt;&gt;" onclick="Move(this)"/> 
    <input type="button" value="&lt;&lt;" onclick="Move(this)"/> 
    <input type="button" value="&lt;" onclick="Move(this)"/> 
</div> 

<select id="Right" multiple="multiple" size="10"> 
</select> 

CSS（實施例）

select { width: 200px; float: left; } 
#Toolbar { width: 50px; float: left; text-align: center; padding-top: 30px; } 
#Toolbar input { width: 40px; } 

快速測試FF3和IE6 & 7只。