Seçme menüsünde "seçilmez" bazı seçenekler yapın

Question

Birkaç seçenekle select öğem var, ancak bazı seçeneklerin seçilemez olmasını istiyorum.

Temel olarak bu gibi:

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

Yani gördüğünüz gibi, ben şehirler doğrudan seçilebilir do istiyorum, ama her şehrin altında gelmenin tek seçenek yoktur.

Kullanıcı, CITY 1 veya CITY 2'u tıklatabilir, ancak seçilemez, böylece kullanıcı aşağıdaki dallardan birini seçmeye zorlanabilir?

Answer 1

Muhtemelen bir <optgroup> aradığınız:

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

düzenli <option> elemanları unselectable yapmak gerekir yoksa, onlara disabled niteliğini verebilir (bir var boolean özniteliği, yani değer hiç önemli değil):

Answer 2

jsFiddle Demo

Sen benim uyou aradığınızı aslında ben ancak sadece gelecek insanlar için nota, sorunuzu önceki cevapları görebilirsiniz bir <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

kullanırsınız Bu StackOverflow soruya benzer şekilde kendim de benzer bir cevabı bulmak için basit bir seçeneğe 'Devre Dışı' yazabilirler.

Olacak gibi: İşte

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

Böyle yapma opsiyonu çok şey var

<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

, ben adında jquery bir eklenti Seçilmiş tavsiye bağlantı, https://harvesthq.github.io/chosen/