jquery - ドロップダウンリストの値を選択不可にする

Question

次のようなドロップダウンリストを作成しました。

Item1
     Item2
     Item3
Item4
     Item5
     Item6
     Item7

Item1とItem4を選択不可にしたいです。これはJqueryで可能ですか？
LaterEdit: 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

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();
    });

Answer 3

これを試して

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

</select>