Çift Liste Kutusunda öğeleri taşıma

Question

Öğeleri bir liste kutusu denetiminden ASP.NET'te JavaScript kullanarak başka bir liste kutusu denetimine nasıl taşıyabilirim?

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'yi kullanmaktan memnunsanız çok basittir.

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

#firstSelect, seçim kutusunun kimliğidir.

Burada bir çalışma örneğini de bulabilirsiniz

:

http://jsbin.com/aluzu

(düzenlemek için: http://jsbin.com/aluzu/edit) Bu kod tıklandığında bir çapa sahip veya bu harekete tetikleyecektir varsayar

Answer 3

bir kütüphane bağımsız çözeltisi:

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 (örnek)

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

Hızlı Test FF3 ve IE6 & 7 sadece.