Mover elementos en Dual Listboxes

Question

¿Cómo puedo mover elementos de un control de cuadro de lista a otro control de cuadro de lista usando JavaScript en ASP.NET?

Answer 1

Este código se supone que tiene un ancla o que activará al movimiento cuando se hace clic en:

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

Si está contento de utilizar jQuery, es muy, muy simple.

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

Donde #firstSelect es el ID del cuadro de selección.

he incluido un ejemplo de trabajo aquí:

http://jsbin.com/aluzu (para editar: http://jsbin.com/aluzu/edit)

Answer 3

Una solución biblioteca independiente:

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 (ejemplo)

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

prueba rápida y FF3 IE6 & 7 solamente.