Faire quelques options dans un menu de sélection "unselectable""
j'ai un élément select avec quelques options, mais je veux que certaines options ne soient pas sélectionnables.
en gros, C'est comme ça:
<select>
<option> CITY 1 </option>
<option> City 1 branch A </option>
<option> City 1 branch B </option>
<option> City 1 branch C </option>
<option> CITY 2 </option>
<option> City 2 branch A </option>
<option> City 2 branch B </option>
...
</select>
comme vous pouvez le voir, Je ne veux pas que les villes soient directement sélectionnables, mais seulement les options qui viennent sous chaque ville.
Comment faire pour que l'utilisateur puisse cliquer sur CITY 1 ou CITY 2 mais il ne sera pas sélectionné, de sorte que l'utilisateur est forcé de choisir un des branches en dessous?
5 réponses
vous êtes probablement à la recherche d'un <optgroup> :
<select>
<optgroup label="CITY 1">
<option>City 1 branch A</option>
<option>City 1 branch B</option>
<option>City 1 branch C</option>
</optgroup>
<optgroup label="CITY 2">
<option>City 2 branch A</option>
<option>City 2 branch B</option>
</optgroup>
</select>
Demo: http://jsfiddle.net/Zg9Mw/
si vous avez besoin de rendre les éléments réguliers <option> Non sélectionnables, vous pouvez leur donner l'attribut disabled (c'est un attribut booléen, donc la valeur n'importe pas du tout):
<option disabled>City 2 branch A</option>
je peux voir à partir de votre question les réponses précédentes à la mienne sont en fait ce que vous recherchez, mais juste pour noter pour les futures personnes venant à cette question StackOverflow moi-même à la recherche d'une réponse similaire, ils peuvent simplement taper "handicapé" dans une option.
<select>
<option value="apple" disabled>Apple</option>
<option value="peach">Peach</option>
<option value="pear">Pear</option>
<option disabled="true" value="orange">Orange</option>
</select>
vous utiliseriez un <optgroup>
<select>
<optgroup label="City 1">
<option>City 1 Branch A</option>
<option>City 1 Branch B</option>
<option>City 1 Branch C</option>
</optgroup>
<optgroup label="City 2">
<option>City 2 Branch A</option>
<option>City 2 Branch B</option>
</optgroup>
</select>
il y a beaucoup d'options pour que cela arrive, je recommande un plugin de jquery nommé Chosen:
ce sera comme:
<select data-placeholder="Choose a Country..." class="chosen-select chose-select-width-custom" multiple tabindex="4" name="countryDigestValues"> <option value=""></option>
<optgroup class="custom-optgroup-class" label="Label Title">
<option class="custom-option-class">Here goes the option to select</option>
</optgroup>
</select>
voici le lien, https://harvesthq.github.io/chosen /
De : Comment montrer désactiver le HTML, sélectionnez l'option par défaut?
C'est une autre façon de faire la même chose.
EDIT: (vous êtes maintenant en mesure d'exécuter ici)
<label>Unreal :</label>
<select name="unreal">
<option style="display:none">Select One</option>
<option>Money</option>
<option>Country</option>
<option>God</option>
</select>