Dodać niektóre opcje w menu wyboru "nie można wybrać"

Question

Mam element select z kilkoma opcjami, ale chcę niektórych opcji nie można wybrać.

W zasadzie to jest tak:

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

Więc jak widać, nie chcę miasta mają być wybierane bezpośrednio, ale tylko opcje, które przychodzą pod każdym mieście.

Jak to zrobić, że użytkownik może kliknąć CITY 1 lub CITY 2, ale nie zostanie wybrany, więc użytkownik jest zmuszony wybrać jedną z gałęzi pod spodem?

Answer 1

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

Jeśli trzeba zrobić regularne <option> elementy niedostępny, można nadać im atrybut disabled (jest to atrybut boolowski, więc wartość nie ma znaczenia):

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

Answer 2

jsFiddle Demo

Można by użyć <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

widzę z pytaniem poprzednie odpowiedzi na moje są w rzeczywistości co uyou szukasz, jednak tylko zauważyć dla przyszłych ludzi przychodząc do tego samego pytania typu StackOverflow, szukając podobnej odpowiedzi, mogą wybrać opcję "Wyłączone" w opcji.

<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

Istnieje wiele opcji, aby to się dzieje, polecam plugin jQuery nazwie Wybrany:

To będzie tak:

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

Oto link, https://harvesthq.github.io/chosen/