Effettuare alcune opzioni in un menu di selezione "non selezionabile"

Question

Ho un elemento select con alcune opzioni, ma desidero che alcune opzioni non siano selezionabili.

In sostanza è come questo:

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

Quindi, come potete vedere, non voglio che le città non siano direttamente selezionabile, ma solo le opzioni che vengono in ogni città.

Come si può fare che l'utente possa fare clic su CITY 1 o CITY 2 ma non verrà selezionato, quindi l'utente è obbligato a scegliere uno dei rami sottostanti?

Answer 1

Probabilmente stai cercando 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/

Se si ha bisogno di fare regolari <option> elementi non selezionabile, si può dare loro l'attributo disabled (si tratta di un attributo booleano, quindi il valore non ha alcuna importanza):

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

Answer 2

jsFiddle Demo

Si potrebbe usare 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> 

Answer 3

posso vedere dalla tua domanda le risposte precedenti per le mie sono in realtà ciò che uyou stanno cercando, ma solo notare per le persone future arrivando a questa domanda di StackOverflow allo stesso modo, alla ricerca di una risposta simile, possiamo semplicemente digitare "Disabilitato" in un'opzione.

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

JSFiddle Demo

Answer 4

Ci sono un sacco di opzione per rendere questo accade, vi consiglio un plugin di jQuery nome Chosen:

Sarà come:

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

Ecco il collegamento, https://harvesthq.github.io/chosen/