2012-04-26 4 views
1

У меня есть страница, которая позволяет людям назначать элементы категории и javascript, которые позволяют перемещать как можно больше элементов из одного поля слева направо и справа, чтобы пользователи могли просматривать и выбор тонкой настройки (который заканчивается в правом поле). Возможно, было бы лучше, если бы элементы могли перемещаться между списками вместо списков, но, по-моему, поле выбора полезно для выбора onclick. Когда пользователь закончил, мне нужно отправить элементы в правом поле в php-скрипт. Тем не менее, мне трудно понять, как захватить все предметы в правильном списке. В скрипте нет формы, поэтому он не может получить ее из document.form. Элементы на самом деле не выбраны, они просто заполняют список, и я хочу получить их все. Есть ли переменная, которая имеет весь список? Скрипт длинный, поэтому вот функции, которые работают. По существу мне нужен способ выписать список элементов в правом поле в конце. Спасибо за любые предложения.javascript захватить все значения списка для php

function moveToRightOrLeft(side) { 
    var listLeft = document.getElementById('selectLeft'); 
    var listRight = document.getElementById('selectRight'); 
    if (side == 1) { 
     if (listLeft.options.length == 0) { 
      alert('You have already assigned all items to the category'); 
      return false; 
     } else { 
      var selectedItem = listLeft.options.selectedIndex; 
      move(listRight, listLeft.options[selectedItem].value, listLeft.options[selectedItem].text); 
      listLeft.remove(selectedItem); 
      if (listLeft.options.length > 0) { 
       listLeft.options[0].selected = true; 
      } 
     } 
    } else if (side == 2) { 
     if (listRight.options.length == 0) { 
      alert('The list is empty'); 
      return false; 
     } else { 
      var selectedItem = listRight.options.selectedIndex; 
      move(listLeft, listRight.options[selectedItem].value, listRight.options[selectedItem].text); 
      listRight.remove(selectedItem); 
      if (listRight.options.length > 0) { 
       listRight.options[0].selected = true; 
      } 
     } 
    } 
} 

function move(listBoxTo, optionValue, optionDisplayText) { 
    var newOption = document.createElement("option"); 
    newOption.value = optionValue; 
    newOption.text = optionDisplayText; 
    listBoxTo.add(newOption, null); 
    return true; 
} 
+0

-1 для страшного форматирования. –

+1

@DenisErmolin Требуется две секунды, чтобы отредактировать –

ответ

2

Во-первых, я думаю, что у вас есть ошибка в вашем синтаксисе. Для того, чтобы получить значение выбранного пункта в окне выбора, вы бы использовать что-то вроде:

var value = listLeft.options[listLeft.selectedIndex].value; 

выписать все параметры в определенном окне выбора, вы должны быть в состоянии сделать что-то вроде этого:

var options = document.getElementById('selectRight').options; 
for (i=0; i<options.length(); i++) 
    document.write("value "+ i +" = "+ options[i].value); 


Я переработал ваш код чуть-чуть, и вот полный рабочий пример:

<html> 
<head> 
    <style type="text/css"> 
     select 
     { 
      width:100px; 
     } 
    </style> 
    <script type="text/Javascript"> 
     function moveToRightOrLeft(side) 
     { 
      if (side == 1) 
      { 
       var list1 = document.getElementById('selectLeft'); 
       var list2 = document.getElementById('selectRight'); 
      } 
      else 
      { 
       var list1 = document.getElementById('selectRight'); 
       var list2 = document.getElementById('selectLeft'); 
      } 

      if (list1.options.length == 0) 
      { 
       alert('The list is empty'); 
       return false; 
      } 
      else 
      { 
       var selectedItem = list1.options[list1.selectedIndex]; 
       move(list2, selectedItem.value, selectedItem.text); 
       list1.remove(list1.selectedIndex); 
       if (list1.options.length > 0) 
        list1.options[0].selected = true; 
      } 
      return true; 
     } 

     function move(listBoxTo, optionValue, optionDisplayText) 
     { 
      var newOption = document.createElement("option"); 
      newOption.value = optionValue; 
      newOption.text = optionDisplayText; 
      listBoxTo.add(newOption, null); 
      return true; 
     } 

     function showContents(listBoxID) 
     { 
      var options = document.getElementById(listBoxID).options; 
      for (var i = 0; i < options.length; i++) 
       alert("Option "+ options[i].value +" = "+ options[i].text); 
     } 
    </script> 
</head> 
<body> 
    <select id="selectLeft" multiple="multiple"> 
     <option value="1">Value 1</option> 
     <option value="2">Value 2</option> 
     <option value="3">Value 3</option> 
    </select> 
    <button onclick="moveToRightOrLeft(2)">&lt;</button> 
    <button onclick="moveToRightOrLeft(1)">&gt;</button> 
    <select id="selectRight" multiple="multiple"> 
    </select> 
    <button onclick="showContents('selectRight')">Show Contents</button> 
</body> 
</html> 
+0

, что само по себе не работало. Можете ли вы предложить синтаксис document.write единственное значение, основанное на переменных в скрипте. Возможно, я смогу получить его оттуда. – user1260310

+0

Я не уверен, с чем вы столкнулись. Если вы копируете и вставляете приведенный выше пример в новую HTML-страницу, тогда он отлично работает. Выполнение 'var options = document.getElementById ('selectRight'). Options;' поместит все опции в поле 'selectRight' в массив под названием' options'. Затем вы можете перебирать их (с помощью цикла for ...), как и я, и делать с ними все, что вам нужно ... 'document.write (options [i] .text);', 'document.write (параметры [i] .value); 'или что бы вы ни делали с ними. С какой частью у вас проблемы? – Travesty3

+0

Должно быть, я отправил свой комментарий, прежде чем освежиться, чтобы увидеть ваш! Вероятно, это не сработало для меня, поскольку я не включил обработчик для запуска alert/document.write и т. Д. Большое спасибо! – user1260310

Смежные вопросы