Implementierung Auswahl und Abwahl (Toggle) auf einem SELECT TAG

Das aktuelle HTML-SELECT-Tag funktioniert gut für mich außer für eine Sache. Ist es möglich, den aktuellen Gegenstand umzuschalten?Implementierung Auswahl und Abwahl (Toggle) auf einem SELECT TAG

Wenn ich eine aktuelle Auswahl haben, würde ich es gerne noch einmal klicken und „Abwahl“ es. So funktioniert es jetzt nicht, es behält einfach die aktuelle Auswahl "ausgewählt".

Es scheint, dass ich die "vorherige" Auswahl zusammen mit der "aktuellen" Auswahl kennen und die 2 vergleichen muss, um zu sehen, ob ich alles "abwählen" muss. Wie bekomme ich die vorherige Auswahl, alles, was ich weiß, ist "selectedIndex", was die aktuelle Auswahl ist.

Gibt es einen Weg?

Quelle

2009-08-06 Robert4Real

Ist dies eine Mehrfachauswahlbox? –

Hat die aufgelistete Lösung für Sie funktioniert? – PortageMonkey

Um dies zu erreichen, können Sie ein wenig Javascript wie folgt verwenden. Ich habe getestet und es scheint zu funktionieren, wie Sie es gewünscht haben. Ich bin für die Lesbarkeit ausführlich, aber Sie können sauber, sobald Sie es für Sie arbeiten lassen.

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

Quelle

2009-08-07 03:49:53 PortageMonkey

Implementierung Auswahl und Abwahl (Toggle) auf einem SELECT TAG

Antwort

Verwandte Themen