onChange und onSelect in Dropdownlist

Ich habe ein Dropdownlist, die den Benutzer fragt, ob er den Verein beitreten möchten:onChange und onSelect in Dropdownlist

Do you want to join the club 
Yes 
No

Unter dieser Liste gibt es eine weitere Liste, die für behinderte als Standard eingestellt ist. Diese Liste hat die Abteilungen des Clubs. Diese Liste wird erst aktiviert, wenn der Benutzer Ja wählt.

Ich habe den folgenden Code erstellt, aber das Problem, das ich nicht lösen konnte, ist angenommen, der Benutzer wählt Ja, dann ändert er seine Entscheidung, so dass er Nein wählen wird. In diesem Fall ist die Liste der Abteilungen weiterhin aktiviert. Ich möchte, dass es deaktiviert wird, wenn er Nein wählt.

<html> 
    <head> 
     <script type="text/javascript"> 
      function disable() 
      { 
       document.getElementById("mySelect1").disabled=true; 
      } 
      function enable() 
      { 
       document.getElementById("mySelect1").disabled=false; 
      } 
     </script> 
    </head> 
    <body> 
     <form> 
      <select id="mySelect" onChange="enable();"> 
       <option onSelect="disable();">No</option> 
       <option onSelect="enable();">Yes</option> 
      </select> 
      <select id="mySelect1" disabled="disabled" > 
       <option>Dep1</option> 
       <option>Dep2</option> 
       <option>Dep3</option> 
       <option>Dep4</option> 
      </select> 
     </form> 
    </body> 
</html>

Ich dachte, dass onSelect="disable();" das Problem lösen würde, aber es funktioniert immer noch nicht.

Dank

Quelle

2012-03-29 Nasser

Sieht aus wie Radio-Tasten wäre viel besser geeignet. Außerdem ist 'onselect' kein gültiges Attribut für Auswahl- und Optionselemente. – RobG

Ausbeute ich es wie folgt jsFiddle exampletun würde.

JavaScript:

function check(elem) { document.getElementById('mySelect1').disabled = !elem.selectedIndex; }

HTML:

<form> <select id="mySelect" onChange="check(this);"> <option>No</option> <option>Yes</option> </select> <select id="mySelect1" disabled="disabled" > <option>Dep1</option> <option>Dep2</option> <option>Dep3</option> <option>Dep4</option> </select> </form>

Quelle

2012-03-29 23:53:10 j08691

ich wette, die onchange nach dem onselect gefeuert, im Wesentlichen die Auswahl wieder ermöglicht wird.

Ich würde empfehlen, implementieren nur die onchange, inspizieren, welche Option ausgewählt wurde, und basierend darauf aktiviert oder deaktiviert.

Um den Wert der gewählten Option Gebrauch erhalten:

document.getElementById("mySelect").options[document.getElementById("mySelect").selectedIndex].value

Welche .. nichts ergeben, da Sie keinen Wert für jede Option angegeben haben .. :(

<select id="mySelect" onChange="enable();"> 
<option onSelect="disable();" value="no">No</option> 
<option onSelect="enable();" value="yes">Yes</option> 
</select>

Jetzt es wird "yes" oder "no"

Quelle

2012-03-29 23:39:22 Halcyon

Um eine robuste Form zu machen, muß sie in einer nützlichen Zustand und die Verwendung Skript geladen werden, sein Verhalten zu verbessern. Im Folgenden wurde die Auswahl durch Radioknöpfe ersetzt (erleichtert dem Benutzer das Leben).

Die Option "Ja" ist standardmäßig aktiviert und die Auswahl ist aktiviert. Wenn der Benutzer einen der beiden Optionsfelder überprüft, wird die Auswahl entsprechend aktiviert oder deaktiviert.

<form onclick="this.mySelect1.disabled = this.becomeMember[1].checked;" ... > 
    <input type="radio" name="becomeMember" checked>Yes<br> 
    <input type="radio" name="becomeMember">No<br> 

    <select id="mySelect1"> 
    <option>Dep1 
    <option>Dep2 
    <option>Dep3 
    <option>Dep4 
    </select> 
    ... 
</form>

Quelle

2012-03-30 01:05:38 RobG

hmm.warum Sie nicht verwenden onClick()

<select id="mySelect" onChange="enable();"> 
    <option onClick="disable();">No</option> 
    <option onClick="enable();">Yes</option> 
</select>

Quelle

2014-01-01 01:46:12 cargaraanorland

Einfach & Einfach: JavaScript-Code:

function JoinedOrNot(){ 
    var cat = document.getElementById("mySelect"); 
    if(cat.value == "yes"){ 
     document.getElementById("mySelect1").disabled = false; 
    }else{ 
     document.getElementById("mySelect1").disabled = true; 
    } 
}

gerade in dieser Zeile hinzufügen [onChange = "JoinedOrNot()"]: <select id="mySelect" onchange="JoinedOrNot()">

es funktionieren gut;)

Quelle

2014-11-23 01:48:58

Antwort

Verwandte Themen