type - select html placeholder

Haga algunas opciones en un menú de selección "no seleccionable"

Question

Tengo un elemento select con algunas opciones, pero quiero que algunas de las opciones no sean seleccionables.

Básicamente es así:

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

Como puede ver, no quiero que las ciudades sean directamente seleccionables, sino solo las opciones que se incluyen en cada ciudad.

¿Cómo se puede hacer para que el usuario pueda hacer clic en CITY 1 o CITY 2 pero no se seleccionará, por lo que el usuario se ve obligado a elegir una de las ramas de abajo?

Answer 1

De: ¿Cómo mostrar la opción de deshabilitar HTML seleccionar de forma predeterminada?

Esta es otra forma de hacer lo mismo.

EDITAR: (ahora puedes ejecutarlo aquí)

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

Answer 2

Hay una gran cantidad de opciones para que esto suceda, recomiendo un plugin de jquery llamado Elegido:

Será como:

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

Aquí está el enlace, https://harvesthq.github.io/chosen/

Answer 3

Probablemente estés buscando 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>

Demostración: http://jsfiddle.net/Zg9Mw/

Si necesita hacer que los elementos regulares de <option> no se puedan seleccionar, puede darles el atributo disabled (es un atributo booleano, por lo que el valor no importa en absoluto):

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

Answer 4

Veo por su pregunta que las respuestas anteriores a la mía son de hecho lo que está buscando, sin embargo, para que las futuras personas que lleguen a esta pregunta de busquen una respuesta similar, pueden simplemente escribir ''Desactivado'' en una opción.

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

Demostración de JSFiddle

Answer 5

jsFiddle Demo

Utilizarías 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>