Question

I am trying to create a drop down that will be something like this:

Area1
 -City1
 -City2
 -City3
Area2
 -City4
 -City5

So, it will have some kind of grouping by areas, and those areas won’t be clickable. Basically, I am trying to achieve what Groupon does.

I have looked at the code of their page, but I fail to see how to achieve that. Do I need JS/jQuery?

Thanks

Answer 1

Use the <optgroup> tag. For example:

<optgroup label='Seattle'>
    <option value='seattle:tacoma'>Tacoma</option>
    <option value='seattle:seattle'>Seattle</option>
</optgroup>

In a web form, the HTML <optgroup> element creates a grouping of options within a <select> element. The label attribute of the optgroup tag is shown the select’s drop down list of items, but cannot be selected. And the best part is that no JavaScript is needed.

Here’s a live jsFiddle example.