javascript - 分组下拉 - 避免选择父级

Question

我正在尝试创建一个下拉菜单，如下所示：

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

因此，它将按区域进行某种分组，而这些区域将不可点击。基本上，我正在努力实现Groupon所做的事情。

我已经查看了他们页面的代码，但我看不到如何实现这一点。我需要 JS/jQuery 吗？

谢谢

Answer 1

使用<optgroup>标签。例如：

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

在 Web 表单中，HTML<optgroup>元素在元素内创建一组选项<select>。optgroup 标签的 label 属性显示在 select 的下拉列表中，但不能被选中。最好的部分是不需要 JavaScript。

这是一个现场jsFiddle 示例。

Answer 2

试试这个

<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>​