jquery - 使下拉列表中的值不可选

Question

我创建了一个看起来有点像这样的下拉列表：

Item1
     Item2
     Item3
Item4
     Item5
     Item6
     Item7

我想让 Item1 和 Item4 成为不可选择的项目。Jquery可以做到这一点吗？
后来编辑：我应该能够通过我的名为 fooheader 的类选择 item1 和 item4 （事件），其余的可选项目由 fooDetails 类调用。

目前我的临时修复使 Dll 中的下一个值成为选定的值，但我正在寻找一个更优雅的问题解决方案

Answer 1

你应该使用<optgroup>...

<select>
  <optgroup label="Item 1">
    <option>Item 2</option>
    <option>Item 3</option>
  </optgroup>
  <optgroup label="Item 4">
    <option>Item 5</option>
    <option>Item 6</option>
    <option>Item 7</option>
  </optgroup>
</select>

这是一个jsFiddle ...

http://jsfiddle.net/DKLwv/

如果您不希望它们嵌套，请这样做...

<select>
  <optgroup label="Item 1"></optgroup>
  <option>Item 2</option>
  <option>Item 3</option>
  <optgroup label="Item 4"></optgroup>
  <option>Item 5</option>
  <option>Item 6</option>
  <option>Item 7</option>
</select>

Answer 2

试试这个

 <select>
<option value="" disabled>---------------------</option>

</select>

Answer 3

Emm .. 我终于完成了这部分 .. 我在修改 DDL 时遇到了一些问题，将选项放置在我的下拉列表中的几个字段中。这是我的解决方案，也许它可以帮助其他人（并在此过程中让我得到一些额外的支持：P）

 var $groups = $("#ddlId").filter(function () {
        return $(this).css('color') == 'rgb(0, 0, 0)'; // your condition of finding the optgroup elements 
    });
    $groups.each(function () {
        var $this = $(this);
        $this.nextUntil($groups).wrapAll($("<optgroup>", {
            label: $this.text()
        })).end().remove();
    });