在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）

回答

相關問題