Insert line break and that element can not be selected in a select

Question

Insert line break and that element can not be selected in a select

Navigation

#1 by (4 votes)

-4

Hi, I'm making a list of items in a <select> and I want to split the options.

For this I want to show different 'categories' as a title (which could not be selected). The problem is that I already tried the conventional to give hops of line in HTML and it has not worked for me. Do you have any idea how to do it?

My idea is that the list is like this when displayed:

Categoría 1 <-- Este elemento no se puede seleccionar  
Elemento seleccionable  
Elemento seleccionable  
Elemento seleccionable  
Elemento seleccionable  

Categoría 2 <-- Este elemento no se puede seleccionar  
Elemento seleccionable  
Elemento seleccionable  
Elemento seleccionable  
Elemento seleccionable  

Categoría 3 <-- Este elemento no se puede seleccionar  
Elemento seleccionable  
Elemento seleccionable  
Elemento seleccionable  
Elemento seleccionable

As a reference, I put this site where they do something similar: Convert World .

I do not ask you to design the list, I just want to know how to apply the line break and the elements that can not be selected.

html css

asked by CarlosDayan 22.06.2017 в 06:29

source

1 answer

MySQL to start with SQL? Pre and post increment operators c ++

score 4 · Accepted Answer

To include "line breaks" you only have to put in select elements option without text.

To prevent some elements from being selected, use the disabled attribute in the option .

<select>
<option disabled>Categoría 1</option>
<option>Elemento seleccionable</option>
<option>Elemento seleccionable</option>
<option>Elemento seleccionable</option>
<option>Elemento seleccionable</option>
<option disabled></option>
<option disabled>Categoría 2</option>
<option>Elemento seleccionable</option>
<option>Elemento seleccionable</option>
<option>Elemento seleccionable</option>
<option>Elemento seleccionable</option>
<option disabled></option>
<option disabled>Categoría 3</option>
<option>Elemento seleccionable</option>
<option>Elemento seleccionable</option>
<option>Elemento seleccionable</option>
<option>Elemento seleccionable</option>
</select>

Another option is to use optgroup :

<select>
    <optgroup label="Categoría 1">
    <option>Elemento seleccionable</option>
    <option>Elemento seleccionable</option>
    <option>Elemento seleccionable</option>
    <option>Elemento seleccionable</option>
    </optgroup>
    <option disabled></option>
    <optgroup label="Categoría 2">
    <option>Elemento seleccionable</option>
    <option>Elemento seleccionable</option>
    <option>Elemento seleccionable</option>
    <option>Elemento seleccionable</option>
    </optgroup>
    <option disabled></option>
    <optgroup label="Categoría 3">
    <option>Elemento seleccionable</option>
    <option>Elemento seleccionable</option>
    <option>Elemento seleccionable</option>
    <option>Elemento seleccionable</option>
    </optgroup>
</select>