2012-03-29 14 views
7

ho una DropDownList che chiede all'utente se vuole entrare nel club:onChange e onSelect in DropDownList

Do you want to join the club 
Yes 
No 

Sotto questa lista c'è un altro elenco che è impostato su disabilitato per default. Questa lista ha i dipartimenti del club. Questo elenco non sarà abilitato fino a quando l'utente non sceglie Sì.

Ho creato il seguente codice ma il problema che non ho potuto risolvere è supporre che l'utente scelga Sì, quindi cambia la sua decisione in modo che scelga di nuovo No. In questo caso l'elenco dei reparti è ancora abilitato. Voglio che sia disabilitato quando sceglie di nuovo No.

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

ho pensato che onSelect="disable();" avrebbe risolto il problema, ma ancora non funziona.

Grazie

+0

Sembra che i pulsanti di opzione siano molto più adatti. Inoltre, 'onselect' non è un attributo valido per elementi di selezione e opzioni. – RobG

risposta

14

lo farei in questo modo jsFiddle example.

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

Scommetto che il onchange è il licenziamento dopo la onselect, essenzialmente riattivare select.

Si consiglia di implementare solo il onchange, verificare quale opzione è stata selezionata e abilitare o disabilitare in base a tale.

per ottenere il valore dell'uso opzione selezionata:

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

che produrrà .. niente dal momento che non è stato specificato un valore per ogni opzione .. :(

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

Ora sarà resa "yes" o "no"

3

Per effettuare una forma robusta, lo hanno caricato in uno script stato e l'uso utile per migliorare il suo comportamento. Di seguito, la selezione è stata sostituita da pulsanti di opzione (la vita risulta molto più semplice per l'utente).

L'opzione "sì" è selezionata per impostazione predefinita e la selezione è abilitata. Se l'utente controlla un pulsante di opzione, la selezione viene abilitata o disabilitata di conseguenza.

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

hmm.perché non si utilizza onClick()

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

Semplicemente & Facile: codice JavaScript:

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

Basta aggiungere in questa linea [onChange = "JoinedOrNot()"]: <select id="mySelect" onchange="JoinedOrNot()">

E ' funziona bene;)

Problemi correlati