2009-08-06 2 views
1

Текущий тег HTML SELECT отлично подходит для меня, за исключением одной вещи. Возможно ли реализовать переключение на текущий элемент.реализация select и deselect (toggle) на SELECT TAG

Если у меня есть текущий выбор, я бы хотел его снова щелкнуть и «отменить». Теперь это не работает, он просто удерживает текущий выбор «выбранным».

Кажется, мне нужно знать «предыдущий» выбор вместе с «текущим» выбором и сравнить 2, чтобы увидеть, нужно ли мне «отменить выбор» всего. Как получить предыдущий выбор, все, что я знаю, это «selectedIndex», который является текущим выбором.

Есть ли способ?

+1

Является ли это полем выбора с множественным выбором? –

+0

Решено ли решение для вас? – PortageMonkey

ответ

0

Для этого вы можете использовать несколько javascript следующим образом. Я тестировал и, похоже, работал так, как вы просили. Я являюсь многословным для удобочитаемости, но вы можете очистить, как только у вас есть работа для вас.

<script language="JavaScript" type="text/javascript"> 
    function toggleSelectedValue() { 

     var selObj = document.getElementById('myList'); 
     var selIndex = selObj.selectedIndex; 
     var selValue = selObj.options[selIndex].value; 
     var prevSelValue = document.getElementById('trackSelectedValueHiddenField').value; 

     if (selValue == prevSelValue) { 

      //Delect "all" items 
      selObj.selectedIndex = -1; 
      document.getElementById('trackSelectedValueHiddenField').value = 0; 
     } 
     else {setSelectedValue();} 

    } 
    function setSelectedValue() 
    { 
     var selObj = document.getElementById('myList'); 
     var selIndex = selObj.selectedIndex; 
     document.getElementById('trackSelectedValueHiddenField').value = selObj.options[selIndex].value; 
    } 
    </script> 

</head> 
<body> 
<div id="wrapper"> 
    <div id="contentDiv" style="height:686px; border: solid 1px red;"> 
    <select multiple="multiple" id="myList" onclick="toggleSelectedValue()"> 
     <option value="1">Test</option> 
     <option value="2">Test</option> 
     <option value="3">Test</option> 
    </select> 
    <input type="hidden" id="trackSelectedValueHiddenField" value="0" /> 
    </div> 
</div> 
</body> 
</html>