Non-selectable drop down list

Question

Is there any way to have a drop-down list in which non of the items are selectable? So basically, I'm just looking to use it as a way of showing/hiding a list. I don't want any hover highlighting and I don't want to be able to change the selected item.

Could you suggest if this is possible, or if anyone has any other ideas to achieve something similar, could you point me to a good example.

Thanks

Answer 1

The optgroup tag comes to mind. It has a disabled attribute.

<select>
  <optgroup label="My List" disabled>
    <option value="item1">Item 1</option>
    <option value="item2">Item 2</option>
  </optgroup>
</select>​

However, IE 6 and 7 don't respect the disabled. Arrgh. Neither do they listen to the readonly attribute slapped on the whole select.

You will have to add a onchange="this.value ='item1';" fallback for those browsers, which obviously isn't watertight if JavaScript is turned off.

JSFiddle here