Par exemple, si vous sélectionnez l'option avec id="chocolate-yes"
ou id="vanilla-yes"
, l'option avec id="icecreamcone-yes"
sera également sélectionnée. Comme vous pouvez le voir sur l'image ci-dessous, lorsque vous sélectionnez l'option id="chocolate-yes"
, <select id="icecreamcone">
sera désactivé.
Lorsque les deux id="chocolate-yes"
et id="vanilla-yes"
ne sont pas sélectionnés l'option avec id="icecreamcone-no"
ne sera pas désactivée.
La sélection d'une option forcera la sélection d'une autre option
Pour le mettre en mots plus simples: vous devez toujours avoir un cornet de crème glacée si vous voulez ajouter la vanille ou de crème glacée au chocolat, à l'exception de vermicelles :)
Toute personne connaître un Javascript qui peut le faire?
Note 1: l'option avec id="sprinkles-yes"
n'affectera id="icecreamcone-yes"
.
Remarque 2: id="icecreamcone-yes"
doit toujours être sélectionnable avant de sélectionner id="vanilla-yes"
ou id="chocolate-yes"
.
Note 3: les noms d'id ne peuvent pas être changés, et vous ne pouvez pas ajouter plus de propriétés aux éléments.
Remarque 4: impossible d'utiliser jQuery.
<ul id="icecream" style="list-style:none;line-height:30px;">
<li>
<select id="icecreamcone">
<option value="addicecreamcone">Would you like an ice cream cone?</option>
<option id="icecreamcone-yes" value="yes">Yes</option>
<option id="icecreamcone-no" value="no">No thanks</option>
</select>
</li>
<li>
<select id="vanilla">
<option value="addvanilla">Would you like to add vanilla ice cream?</option>
<option id="vanilla-yes" value="yes">Yes</option>
<option id="vanilla-no" value="no">No thanks</option>
</select>
</li>
<li>
<select id="chocolate">
<option value="addchocolate">Would you like to add chocolate ice cream?</option>
<option id="chocolate-yes" value="yes">Yes</option>
<option id="chocolate-no" value="no">No thanks</option>
</select>
</li>
<li>
<select id="sprinkles">
<option value="addsprinkles">Would you like to add sprinkles on top?</option>
<option id="sprinkles-yes" value="yes">Yes</option>
<option id="sprinkles-no" value="no">No thanks</option>
</select>
</li>
</ul>
fonctionne très bien, sauf pour deux problèmes: ne peut pas utiliser jQuery pour cet exemple, et je ne peux pas sélectionner " icecreamcone-oui "avant de choisir" vanille-oui "ou" chocolat-oui ". – Macchiato