Déplacement d'éléments dans deux listes de sélection

Question

Comment puis-je déplacer des éléments d'un contrôle de zone de liste vers un autre contrôle de zone de liste en utilisant JavaScript dans ASP.NET?

Answer 1

Ce code suppose que vous avez une ancre ou qui déclenchera le mouvement quand il est cliqué:

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 vous êtes heureux d'utiliser jQuery, c'est très, très simple.

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

Où #firstSelect est l'ID de la zone de sélection.

J'ai inclus un exemple de travail ici:

http://jsbin.com/aluzu (pour modifier: http://jsbin.com/aluzu/edit)

Answer 3

Une solution de bibliothèque indépendante:

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

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

FF3 test rapide et IE6 & 7 uniquement.