Can I make it so that some rows in a select cannot be clicked?

Question

I have a standard type of select list:

<select>
  <option value="cars1">Cars 1</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="cars2">Cars 2</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

This is just an example but what I would like to do is to make Cars 1 and Cars 2 in the list as headings that cannot be selected.

Is there some way that I can do this?

pimvdb · Accepted Answer · 2012-07-22T15:15:52.260

6

Sure, it's called an <optgroup>: fiddle

<select>
  <optgroup label="Cars 1">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="Cars 2">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
  </optgroup>
</select>

edited Jul 22 '12 at 15:15

answered Jul 22 '12 at 13:53

pimvdb

151,816
78
307
352

@pimvdb - Not part of the original question but do you know if it is possible to have different levels of optgroup? – Alan2 Jul 22 '12 at 13:57
@Gemma: Looks like it's not: http://stackoverflow.com/questions/1037732/nesting-optgroups-in-a-dropdownlist-select. – pimvdb Jul 22 '12 at 13:58

score 5 · Answer 2 · answered Jul 22 '12 at 13:56

Another way is to use disabled attribute:

<select>
  <option value="cars1" disabled>Cars 1</option>
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="cars2" disabled>Cars 2</option>
  <option value="mercedes">Mercedes</option>
  <option value="audi">Audi</option>
</select>

Live demo: Tinkerbin

score 2 · Answer 3 · edited Jul 22 '12 at 13:59

2

Use optgroup tag

<select>
  <optgroup label="Cars 1">
      <option value="volvo">Volvo</option>
      <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="Cars 2">
      <option value="mercedes">Mercedes</option>
      <option value="audi">Audi</option>
  </optgroup>
</select>

edited Jul 22 '12 at 13:59

Mr. Alien

153,751
34
298
278

answered Jul 22 '12 at 13:55

rogal111

5,874
2
27
33

because its the same as the other answer, with not any difference – Gntem Jul 22 '12 at 13:57
1

@GeoPhoenix - Sometimes we all type the same thing, and post within seconds of each other, so on questions that have an obvious answer you'll see a bunch of similar answers given within a short timeframe, no need to downvote just for that? – adeneo Jul 22 '12 at 14:02

score 0 · Answer 4 · answered Jul 22 '12 at 13:55

I'm guessing you are looking for optgroup:

<select>
    <optgroup label="Cars 1">
        <option value="volvo">Volvo</option>
        <option value="saab">Saab</option>
    </optgroup>
    <optgroup label="Cars 2">
        <option value="mercedes">Mercedes</option>
        <option value="audi">Audi</option>
    </optgroup>
</select>

FIDDLE

Can I make it so that some rows in a select cannot be clicked?

4 Answers4