Переместить элементы из списка в другое - PullRequest
Новая
       14

Переместить элементы из списка в другое

1 голос
/ 08 августа 2011

Доброго всем дня.

Мне нужно это сделать. У меня есть 2 списка, и при нажатии кнопки мне нужно переместить параметр из одного в другой.

Я сделал это:

HTML: 

       <table border="1" cellpadding="5">
            <tr>
                <td>
                    Un-Selected <br />
                    <select multiple="multiple" id="selectBoxOne" size="5" class="selectListBox">
                        <option value="0" id="multiple0">Option 0</option>
                        <option value="1" id="multiple1">Option 1</option>
                        <option value="2" id="multiple2">Option 2</option>
                        <option value="3" id="multiple3">Option 3</option>
                        <option value="4" id="multiple4">Option 4</option>
                        <option value="5" id="multiple5">Option 5</option>
                    </select>
                    <br />
                    <input type="checkbox" id="selectAllFirst"/>Select All or Ctrl+Click
                </td>
                <td>
                    <div onclick="move('left');"> << </div>
                    <div onclick="move('right');"> >> </div>
                </td>
                <td>
                    Selected <br />
                    <select name="policyCode" multiple="multiple" id="selectBoxSecond" size="5" class="selectListBox">

                    </select>
                    <br />
                    <input type="checkbox" id="selectAllSecond"/>Select All or Ctrl+Click
                </td>


            </tr>
        </table>

JavaScript: 

// Declare elements

var selectOptions = Array();
selectOptions[0] = "Option 0";
selectOptions[1] = "Option 1";
selectOptions[2] = "Option 2";
selectOptions[3] = "Option 3";
selectOptions[4] = "Option 4";
selectOptions[5] = "Option 5";

// function to move an element from a box to the other
function move(sens)
{               
    if (sens == "right")
    {
        var selObj = document.getElementById('selectBoxOne');    
        var chkAll = document.getElementById("selectAllFirst")
        var destination = document.getElementById("selectBoxSecond");
    }
    else
    {
        var selObj = document.getElementById('selectBoxSecond');    
        var chkAll = document.getElementById("selectAllSecond")
        var destination = document.getElementById("selectBoxOne");
    }
    var selectedArray = new Array();        
    var i;
    var count = 0;
    if (chkAll.checked == 1)
    {
        for (i = 0; i<selectOptions.length; i++)
        {
            selectedArray[i] = i;
        }
    }
    else
    {            
        for (i=0; i<selObj.options.length; i++) {
            if (selObj.options[i].selected) {
                selectedArray[count] = selObj.options[i].value;
            count++;
            }
        }            
    }

    for (i = 0; i < selectedArray.length; i++)
    {
        var optionTag = document.createElement("option");
        id = selectedArray[i];
        optionTag.innerHTML = selectOptions[id];
        optionTag.value = id;
        optionTag.id = "multiple"+id;
        destination.appendChild(optionTag);
        var rmv = document.getElementById("multiple"+id);
        rmv.parentNode.removeChild(rmv);
    }
}

Теперь: скрипт отлично работает при перемещении из левого окна в правое поле. Но когда я пытаюсь обойти это, происходит сбой. Ошибка не возвращается, но я точно знаю, что это часть удаления (если я ее прокомментирую, она работает нормально ... за исключением того, что она генерирует дубликаты, так как не удаляется опция перемещения).

Чтобы быть более конкретным, это 2 строки: var rmv = document.getElementById ("несколько" + идентификатор); rmv.parentNode.removeChild (RMV);

Поскольку ошибки не возвращаются, я не знаю, как это исправить. Любая помощь, пожалуйста?

Ответы [ 2 ]

5 голосов
/ 08 августа 2011

Это очень долгий путь!: -)

Вы можете переместить параметр из одного выбора в другой, просто назначив его в качестве дочернего элемента другого выбора, например, 

function move(sens) {

  var i, sourceSel, targetSel; 

  if (sens == 'right') {
    sourceSel = document.getElementById('selectBoxOne'); 
    targetSel = document.getElementById('selectBoxSecond');
  } else {
    sourceSel = document.getElementById('selectBoxSecond'); 
    targetSel = document.getElementById('selectBoxOne');
  }

  i = sourceSel.options.length;
  while (i--) {
    if (sourceSel.options[i].selected) {
      targetSel.appendChild(sourceSel.options[i]);
    }
  }
}

переместит все выбранные параметры из одного вдругой.Обратите внимание, что цикл while идет в обратном направлении, поскольку коллекция options представляет собой живой NodeList, поэтому удаление параметров сокращает коллекцию.Если вы идете вперед через него, вам нужно обновлять индекс и длину по мере того, как вы идете (поэтому возвращаться назад проще).

Возможно, вы захотите включить какой-либо порядок или сортировку (например, по значению или тексту).

Полагаю, если установлен флажок selectAll , вы просто переместите их все или (предпочтительно) вы можете использовать прослушиватель щелчков, чтобы выбрать / отменить выбор всех соответствующих оптоинов, когда он независимыйфункции move .

1 голос
/ 08 августа 2011

Идентификатор должен быть уникальным, иначе он не будет работать должным образом. Когда вы добавляете новую опцию перед удалением оригинала, вы получаете две опции с одинаковым идентификатором, и вы не найдете оригинальную опцию, когда хотите удалить ее.

Просто поменяйте местами эти три строки, чтобы удалить опцию перед добавлением новой. Из этого: 

destination.appendChild(optionTag);
var rmv = document.getElementById("multiple"+id);
rmv.parentNode.removeChild(rmv);

к этому: 

var rmv = document.getElementById("multiple"+id);
rmv.parentNode.removeChild(rmv);
destination.appendChild(optionTag);
...