jquery - オプションでグループ化された編集可能な選択ボックス

Question

こんにちは、私はドロップダウン/選択ボックスに取り組んでいます。

これが私の要件です。

オプションのグループを含むドロップダウンボックスが必要であり、編集可能にする必要があります。

グループ化のために使用<optgroup>し、編集可能にするために jquery.editable.select プラグインを使用しました。しかし、問題は、selectbox で editable を呼び出すとすぐに、グループ化が消えてしまうことです。

これが私のコードです。

<select class= "myclass">
   <optgroup label="Dairy products">
      <option>Cheese</option>
      <option>Egg</option>
    </optgroup>
    <optgroup label="Vegetables">
      <option>Cabbage</option>
      <option>Lettuce</option>
      <option>Beans</option>
      <option>Onions</option>
    </optgroup>
</select>

これを行うと、グループ化が消えます。

$('.myclass').each(function(){
      $(this).editableSelect({
          bg_iframe: true,
          case_sensitive: false,
          items_then_scroll: 10,
      });
});

編集とグループ化の両方を実現できる方法を見つけてください。

また、選択したプラグインも見つけましたが、選択ボックスを編集できません。また、オプションをリストに動的に追加したくありません。ユーザーがテキストを入力できるようにしたいだけです。