web-dev-qa-db-fra.com

Faire des options dans un menu de sélection "non sélectionnable"

J'ai un élément select avec quelques options, mais je veux que certaines des 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 constater, je ne veux pas que les villes soient sélectionnables directement, mais seulement les options qui se trouvent sous chaque ville.

Comment peut-on faire en sorte que l'utilisateur puisse cliquer sur CITY 1 ou CITY 2 mais il ne sera pas sélectionné, l’utilisateur est donc obligé de choisir l’une des branches situées en dessous?

htmlhtml-select
53
user961627

Vous cherchez probablement 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>

Démo: http://jsfiddle.net/Zg9Mw/

Si vous avez besoin de rendre les éléments <option> Normaux non sélectionnables, vous pouvez leur attribuer l'attribut disabled (c'est un attribut booléen, la valeur n'a donc aucune importance):

<option disabled>City 2 branch A</option>
135
Blender

Je peux voir dans votre question que les réponses précédentes aux miennes sont en fait ce que vous recherchez, mais il convient de noter que les futurs utilisateurs de cette question de StackOverflow et moi-même recherchons une réponse similaire: ils peuvent simplement taper 'Désactivé' 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>

Démo JSFiddle

19
user2199660

jsFiddle Demo

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>
11
Travis J

De: Comment afficher l’option de désactivation de la sélection HTML par défaut?

C'est une autre façon de faire la même chose.

EDIT: (maintenant vous pouvez le lancer ici)

<label>Unreal :</label>
<select name="unreal">
   <option style="display:none">Select One</option>
   <option>Money</option>
   <option>Country</option>
   <option>God</option>
</select>
3
maximran

Il y a beaucoup d'options pour que cela se produise, 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/

0
druiz