2010-11-23 2 views
0

Я ищу фрагмент javascript, который может реализовать функцию ShuttleBox.Динамическая реализация ShuttleBox с использованием Javascript

В основном мне нужно предоставить 2 списка и 4 кнопки - Переместить влево, Переместить вправо, Переместить все влево и Переместить все вправо. Но я хочу, чтобы реализовать этот кусок кода динамики, так что его можно использовать повторно, просто проходя объект йот только в параметрах ...

Любой кусок кода или ссылки, будет высоко оценен ...

Спасибо ...

+0

возможно дубликат [фильтруемого множественный выбор челночных выпадающий/передаче виджета] (http://stackoverflow.com/questions/13366940/filterable -Multi-выбрать-выпадающий-шатл-трансфер-виджет) – 2012-11-17 01:16:51

ответ

2

ли вы имеете в виду что-то подобное ?:

<html> 
<body> 

<script> 
function move_right() 
{ 
    var node = document.getElementById ("left"); 
    for (i=0; i < node.childNodes.length; i ++) 
    { 
     if (node.childNodes[i].selected) 
     { 
      document.getElementById ("right").appendChild(node.childNodes[i].cloneNode(true)); 
      node.removeChild (node.childNodes[i]); 
      -- i; 
     } 
    } 
} 

function move_left() 
{ 
    var node = document.getElementById ("right"); 
    for (i=0; i < node.childNodes.length; i ++) 
    { 
     if (node.childNodes[i].selected) 
     { 
      document.getElementById ("left").appendChild(node.childNodes[i].cloneNode(true)); 
      node.removeChild (node.childNodes[i]); 
      -- i; 
     } 
    } 
} 

function move_all_right() 
{ 
    var node = document.getElementById ("left");  
    while (node.childNodes.length > 0)   
    {   
     document.getElementById ("right").appendChild(node.firstChild.cloneNode(true)); 
     node.removeChild (node.firstChild);   
    }  
} 

function move_all_left() 
{ 
    var node = document.getElementById ("right");  
    while (node.childNodes.length > 0)   
    {   
     document.getElementById ("left").appendChild(node.firstChild.cloneNode(true)); 
     node.removeChild (node.firstChild);   
    }  
} 
</script> 
<select multiple="multiple" id="left"><option>item 0</option><option>item 1</option><option>item 2</option><option>item 3</option></select> 
<input type="button" value="<" onclick="move_left()"/> 
<input type="button" value="<<" onclick="move_all_left()"/> 
<input type="button" value=">>" onclick="move_all_right()"/> 
<input type="button" value=">" onclick="move_right()"/> 
<select multiple="multiple" id="right"></select> 

</body> 
</html> 
Смежные вопросы