web-dev-qa-db-fra.com

Boîte de sélection désactivée ou activée par une option d'une autre boîte de sélection

J'essaie de créer une relation/connexion entre 2 cases à cocher

<form id="creation" name="creation">
<select name="select01" id="select01">
     <option value="01">01</option>
     <option value="02">02</option>
     <option value="03">03</option>
</select>

<select name="select02" id="select02">
     <option value="aa">aa</option>
     <option value="bb">bb</option>
     <option value="cc">cc</option>
</select>
</form>

Je veux que ma selectbox select02 soit désactivée au début, et lorsque je clique sur value02 ou value03 , nous l’activons, et lorsque nous cliquons sur value01 , la désactivons .

Il y a mon code js pour le moment. J'essaie de l'adapter à partir d'une autre fonction (bouton radio permettant une zone de sélection), mais cela ne semble pas fonctionner. Ma liste est désactivée au début, mais onclick ne fonctionne pas ...

Un corps peut m'aider?

var oui = document.creation.select01[0];

document.getElementById("select02").disabled=true;
oui.onclick = function() {
document.getElementById("select02").disabled=false;
}

Ok, alors MAINTENANT, je suis avec ce code:

<script>
var oui = document.select01;
document.getElementById("select02" ).disabled=true;
oui.onchange = function(){
document.getElementById("select02" ).disabled=false;
}
</script>

Je change la valeur de mon selec01, puis mon select02 est maintenant activé .. mais comment puis-je cibler seulement 2 options de mon select01?

javascripthtmlselect
12
Peter

Essaye ça:

<form id="creation" name="creation" onchange="handleSelect()">
<select name="select01" id="select01">
     <option value="01">01</option>
     <option value="02">02</option>
     <option value="03">03</option>
</select>

<select name="select02" id="select02" disabled>
     <option value="aa">aa</option>
     <option value="bb">bb</option>
     <option value="cc">cc</option>
</select>
</form>

Et en tant que script JS:

 function handleSelect() {
     if (this.value == '01') {
         document.getElementById('select02').disabled = true;
     } else {
         document.getElementById('select02').disabled = false;
     }
 }

Et un conseil: explorez jQuery, un framework JS très populaire (jquery.com). Vous pouvez accomplir votre tâche très simplement en l'utilisant.

13
cassi.lup
​document.getElementById('select01').onchange = function () {
    document.getElementById("select02").disabled = this.value == '01';
}​​​​​​​​

Voici le violon: http://jsfiddle.net/PK2vc/

3
Joseph Silber

Vous devez utiliser onchange au lieu de onclick. Donc ci-dessous devrait être 

oui.onclick = function()

Remplacé par 

oui.onchange = function()

Bonne chance !!

1
Kundan Singh Chouhan