Сделайте несколько опций в выбранном меню "unselectable"

У меня есть элемент select с несколькими параметрами, но я хочу, чтобы некоторые из параметров не могли быть выбраны.

В основном это так:

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

Итак, как вы можете видеть, я не хочу, чтобы города выбирались напрямую, а только параметры, которые попадают под каждый город.

Как это сделать, чтобы пользователь мог нажать CITY 1 или CITY 2, но он не будет выбран, поэтому пользователь вынужден выбрать одну из ветвей внизу?

Ответ 1

Возможно, вы ищете <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>

Демо: http://jsfiddle.net/Zg9Mw/

Если вам нужно сделать регулярные элементы <option> невыбираемыми, вы можете указать им атрибут disabled (это логический атрибут, поэтому значение вообще не имеет значения):

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

Ответ 2

Я вижу из вашего вопроса, что предыдущие ответы на мои - это то, что вы ищете, но просто для будущих людей, приходящих на этот вопрос StackOverflow, сам, ища похожие ответы, они могут просто ввести "Отключено" в вариант.

<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

Ответ 3

jsFiddle Demo

Вы использовали бы <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>

Ответ 4

Есть много вариантов, чтобы это произошло, я рекомендую плагин jquery с именем Chosen:

Это будет выглядеть так:

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

Вот ссылка, https://harvesthq.github.io/chosen/