web-dev-qa-db-fra.com

onChange et onSelect dans DropDownList

J'ai une DropDownList qui demande à l'utilisateur s'il souhaite rejoindre le club:

Do you want to join the club
Yes
No

Sous cette liste, il existe une autre liste qui est définie sur désactivé par défaut. Cette liste comprend les départements du club. Cette liste ne sera pas activée tant que l'utilisateur n'aura pas choisi Oui.

J'ai construit le code suivant mais le problème que je n'ai pas pu résoudre est supposons que l'utilisateur choisisse Oui, puis il change sa décision pour qu'il choisisse à nouveau Non. Dans ce cas, la liste des départements est toujours activée. Je veux qu'il soit désactivé lorsqu'il choisit à nouveau Non.

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

Je pensais que onSelect="disable();" résoudrait le problème mais cela ne fonctionne toujours pas.

Merci

javascripthtmlonchange
7
Nasser

Je le ferais comme ça exemple jsFiddle.

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

Je parie que le onchange est tiré après le onselect, réactivant essentiellement la sélection.

Je vous recommande d'implémenter niquement le onchange, inspecter quelle option a été sélectionnée et activer ou désactiver en fonction de cela.

Pour obtenir la valeur de l'option sélectionnée, utilisez:

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

Ce qui ne donnera rien .. puisque vous n'avez pas spécifié de valeur pour chaque option .. :(

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

Maintenant, cela donnera "yes" ou "no"

4
Halcyon

Pour créer un formulaire robuste, faites-le charger dans un état utile et utilisez un script pour améliorer son comportement. Dans ce qui suit, la sélection a été remplacée par des boutons radio (facilite la vie de l'utilisateur).

L'option "oui" est cochée par défaut et la sélection est activée. Si l'utilisateur coche l'un des boutons radio, la sélection est activée ou désactivée en conséquence.

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

Simplement et facilement: code JavaScript:

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

il suffit d'ajouter dans cette ligne [onChange = "JoinedOrNot ()"]: <select id="mySelect" onchange="JoinedOrNot()">

ça marche bien;)

3
Yassine Sedrani

hmm. pourquoi n'utilisez-vous pas onClick()

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