Выбор материала делает неправильную опцию при использовании групп opt

Question

Я использую материализацию css framework для разработки пользовательского веб-приложения для моей компании.

Итак, в какой-то момент мне нужно отобразить выбор, содержащий несколько задач, сгруппированных по проекту, с помощью групп opt. Каждый проект отличается друг от друга, а также связанные задачи, но некоторые задачи могут иметь одно и то же имя (даже если они хранятся с разными идентификаторами в базе данных).

Чтобы быть как можно точнее, допустим, что у моего проекта «Project One» есть задача «R & D» (id = 1) и задача «Развитие» (id = 2). В моем проекте «Проект два» есть задача «Встреча с клиентом» (id = 3) и задача «R & D» (id = 4).

Так оригинальный HTML выбора имеет правильный вариант, выбранный (ID = 4), но материал выбрать визуализации имеет первый вариант с названием «R & д» выбран ...

<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

Это не может быть правильным решением, но, пройдя через материализовать forms.js файл на их Github, оказывается, что Javascript код инициализации их выбора использует имя опции, а не его значение. Таким образом, вы не делаете ничего плохого, просто то, как работает плагин, не соответствует вашим потребностям. Однако в отношении вашей проблемы я не могу предоставить вам больше помощи.