optgroupsを使用するとMaterial selectレンダリングオプションが間違って表示される

Question

Materialize cssフレームワークを使用して私の会社のカスタムWebアプリケーションを開発しています。

私は、ある時点で、optgroupsを使って、プロジェクトごとにグループ化されたいくつかのタスクを含むselectを表示しなければなりません。すべてのプロジェクトは互いに異なり、関連するタスクも同じですが、（データベースに異なるIDで格納されていても）同じ名前を持つタスクもあります。

私のプロジェクト "Project One"には、タスク 'R & D'（id = 1）とタスク 'Developpement'（id = 2）があります。私のプロジェクト "Project Two"には、 "顧客との会合"（id = 3）と "R & D"（id = 4）というタスクがあります。

ように、元のHTMLを選択し、選択した権利オプション（ID = 4）を有しているが、材料をレンダリングを選択し、選択し名「R & D」との最初のオプションを持っています...

<select id="selectId" name="SelectName"> 
    <option value="">Select Main task</option> 
    <optgroup label="Project 1"> 
     <option value="420">Task Name 1</option> 
     <option value="421">Task Name 2</option> 
    </optgroup> 
    <optgroup label="Project 3"> 
     <option value="2168">Task Name 7</option> 
     <option value="2169" selected="selected">Task Name 2</option> 
    </optgroup> 
</select> 

は

をレンダリングここで

<div class="select-wrapper"> 
    <span class="caret">▼</span> 
    <input type="text" class="select-dropdown" readonly="true" data-activates="select-options-75d04c8c-c252-a1ab-a84a-b5e81f275405" value="Task Name 2"> 
    <ul id="select-options-75d04c8c-c252-a1ab-a84a-b5e81f275405" class="dropdown-content select-dropdown" 
     style="width: 250px; position: absolute; top: 0px; left: 0px; opacity: 1; display: none;"> 
     <li class=""><span>Select Main task</span></li> 
     <li class="optgroup"><span>Project 1</span></li> 
     <li class="optgroup-option "><span>Task Name 1</span></li> 
     <li class="optgroup-option"><span>Task Name 2</span></li> 
     <li class="optgroup"><span>Project 3</span></li> 
     <li class="optgroup-option "><span>Task Name 7</span></li> 
     <li class="optgroup-option "><span>Task Name 2</span></li> 
    </ul> 
    <select id="task_mainTaskQuote" name="task[mainTaskQuote]" required="required" class="initialized"> 
     <option value="">Select Main task</option> 
     <optgroup label="Project 1"> 
      <option value="420">Task Name 1</option> 
      <option value="421">Task Name 2</option> 
     </optgroup> 
     <optgroup label="Project 2"> 
      <option value="465">Task Name 3</option> 
      <option value="466">Task Name 4</option> 
      <option value="467">Task Name 5</option> 
      <option value="2739">Task Name 6</option> 
     </optgroup> 
     <optgroup label="Project 3"> 
      <option value="2168">Task Name 7</option> 
      <option value="2169" selected="selected">Task Name 2</option> 
      <option value="2170">Task Name 8</option> 
      <option value="2180">Task Name 9</option> 
      <option value="2181">Task Name 10</option> 
     </optgroup> 
    </select> 
</div> 

はそれについてjsFiddleです：私はこのケースでまたは私はトンを防ぐことができますどのように間違って何をすべきかについてhttps://jsfiddle.net/h7vu2nb1/

任意のヒント彼の行動？

Thxを

Answer 1

これは自分のGithub上forms.jsファイルを実体通過して、適切な解決策ではありませんかもしれないが、javascriptのコードはその値を、彼らの選択は、オプションの名前を使用して初期化しないことが表示されます。だからあなたは間違って何もしていない、それはプラグインがあなたのニーズに合っていない方法だけで動作します。 あなたの問題に関して私はあなたにもっと助けを与えることはできません。