Перемещение элементов в двойных списках

Question

Как перенести элементы из одного элемента управления списком в другой элемент управления списком с помощью JavaScript в ASP.NET?

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 - идентификатор поля выбора.

Я включил рабочий пример здесь:

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 только.