通过分组下拉 - 避免选择父级

时间:2012-05-15 19:29:24

标签: javascript html drop-down-menu parent

我正在尝试创建一个类似下拉的下拉列表:

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

因此,它将按区域进行某种分组,并且这些区域将无法点击。基本上,我正在努力实现Groupon所做的。

我查看了他们页面的代码,但我没看到如何实现这一点。我需要JS / jQuery吗?

由于

2 个答案:

答案 0 :(得分:2)

使用<optgroup>标记。例如:

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

在网络表单中,HTML <optgroup>元素会在<select>元素中创建一组选项。 optgroup标签的label属性显示在select的项目下拉列表中,但无法选择。最好的部分是不需要JavaScript。

这是一个实时 jsFiddle example

答案 1 :(得分:0)

试试这个

<select>
  <optgroup label="Candy">
    <option value="snickers">Snickers</option>
    <option value="HerseyBar">Hershey Bar</option>
  </optgroup>
  <optgroup label="Fruit">
    <option value="apple">Apple</option>
    <option value="orange">Orange</option>
  </optgroup>
</select>​