在SELECT TAG上实现选择和取消选择（toggle）

当前的HTML SELECT标记对我来说很好，除了一件事。是否可以实现切换当前项目。在SELECT TAG上实现选择和取消选择（toggle）

如果我有当前的选择，我想再次单击它并“取消选择”它。它现在不这样工作，它只是保持当前选择“被选中”。

看来我需要知道“先前”选择以及“当前”选择，并比较2以查看是否需要“取消选择”所有内容。我如何获得之前的选择，我所知道的是“selectedIndex”，这是当前选择。

有没有办法？

来源

2009-08-06 Robert4Real

这是一个多选的选择框吗？ – 2009-08-06 20:45:25

列出的解决方案是否适合您？ – PortageMonkey 2009-08-07 18:02:43

要做到这一点，您可以使用一点点的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>

来源

2009-08-07 03:49:53 PortageMonkey

在SELECT TAG上实现选择和取消选择（toggle）

回答

相关问题