Выберите несколько с Optgroup в материализации

Question

У меня есть выбор со многими optgroup. Я хочу выбрать разные опции, поэтому я добавил multiple к тегу выбора, но я также хочу выбрать всю группу, когда щелкну по заголовку его группы. Проблема в том, что я использую Materialize, поэтому я не могу работать непосредственно на <select>. Вот код html.

     <select name="AGREGA_PRODUCTO" id="AGREGA_PRODUCTO" multiple="" tabindex="-1">
          <option value="" disabled="" selected="">Seleccione uno o más</option>
        <optgroup label="FRASCO">

          <option value="'9'">100</option>

          <option value="'2'">15</option>

          <option value="'3'">25</option>

          <option value="'5'">30 C</option>

          <option value="'4'">30 Y</option>

          <option value="'8'">60 B</option>

          <option value="'7'">60 C</option>

          <option value="'6'">60 Y</option>
       </optgroup>
       <optgroup label="DIFUSOR">

          <option value="'17'">100 CAM - AMB</option>

          <option value="'18'">180 DIF - AMB</option>

          <option value="'19'">180 DIF - AMB BMX</option>

          <option value="'20'">180 DIF - FRA</option>

          <option value="'21'">180 DIF - FRA BMX</option>

          <option value="'10'">50 CER - AMB</option>

          <option value="'11'">50 CER - FRA</option>

          <option value="'12'">50 ELECTRICO - AMB</option>

          <option value="'13'">50 ELECTRICO - FRA</option>

          <option value="'16'">60 CAM - AMB</option>

          <option value="'14'">60 DIF - AMB</option>

          <option value="'15'">60 DIF - FRA</option>
        </optgroup>
        <optgroup label="CREMA">

          <option value="'23'">CRE 50</option>
         </optgroup>
         <optgroup label="DESODORANTE">

          <option value="'22'">DES 50</option>
         </optgroup>
        </select>

А вот код, сгенерированный Materialize для предыдущего выбора.

<ul id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a1" class="dropdown-content select-dropdown multiple-select-dropdown" tabindex="0" style="">
  <li class="disabled selected" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a10" tabindex="0"><span><label><input type="checkbox" disabled=""><span>Seleccione uno o más</span></label></span></li>
  <li class="optgroup" tabindex="0"><span>FRASCO</span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a11" tabindex="0"><span><label><input type="checkbox"><span>100</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a12" tabindex="0"><span><label><input type="checkbox"><span>15</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a13" tabindex="0"><span><label><input type="checkbox"><span>25</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a14" tabindex="0"><span><label><input type="checkbox"><span>30 C</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a15" tabindex="0"><span><label><input type="checkbox"><span>30 Y</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a16" tabindex="0"><span><label><input type="checkbox"><span>60 B</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a17" tabindex="0"><span><label><input type="checkbox"><span>60 C</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a18" tabindex="0"><span><label><input type="checkbox"><span>60 Y</span></label></span></li>
  <li class="optgroup" tabindex="0"><span>DIFUSOR</span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a19" tabindex="0"><span><label><input type="checkbox"><span>100 CAM - AMB</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a110" tabindex="0"><span><label><input type="checkbox"><span>180 DIF - AMB</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a111" tabindex="0"><span><label><input type="checkbox"><span>180 DIF - AMB BMX</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a112" tabindex="0"><span><label><input type="checkbox"><span>180 DIF - FRA</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a113" tabindex="0"><span><label><input type="checkbox"><span>180 DIF - FRA BMX</span></label></span></li>
    <li class="optgroup-option selected" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a114" tabindex="0"><span><label><input type="checkbox"><span>50 CER - AMB</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a115" tabindex="0"><span><label><input type="checkbox"><span>50 CER - FRA</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a116" tabindex="0"><span><label><input type="checkbox"><span>50 ELECTRICO - AMB</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a117" tabindex="0"><span><label><input type="checkbox"><span>50 ELECTRICO - FRA</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a118" tabindex="0"><span><label><input type="checkbox"><span>60 CAM - AMB</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a119" tabindex="0"><span><label><input type="checkbox"><span>60 DIF - AMB</span></label></span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a120" tabindex="0"><span><label><input type="checkbox"><span>60 DIF - FRA</span></label></span></li>
  <li class="optgroup" tabindex="0"><span>CREMA</span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a121" tabindex="0"><span><label><input type="checkbox"><span>CRE 50</span></label></span></li>
  <li class="optgroup" tabindex="0"><span>DESODORANTE</span></li>
    <li class="optgroup-option" id="select-options-f1415714-9574-6af8-ef43-f34abbdd52a122" tabindex="0"><span><label><input type="checkbox"><span>DES 50</span></label></span></li>
</ul> 

Мне нужно знать, как я могу выбрать / отменить выбор всего группа только нажав на название. Спасибо

Answer 1

У меня наконец есть ответ. Я изменил select и добавил классы к каждому optgroup и option. Классы:

• optgroup : "TIPO_" + метка
• опция : "tipo_" + метка

<select name="AGREGA_PRODUCTO" id="AGREGA_PRODUCTO" multiple="" tabindex="-1">
          <option value="" disabled="" selected="">Seleccione uno o más</option>
                    <optgroup label="FRASCO" class="TIPO_FRASCO">

              <option value="'9'" class="tipo_FRASCO">100</option>

              <option value="'2'" class="tipo_FRASCO">15</option>

              <option value="'3'" class="tipo_FRASCO">25</option>

              <option value="'5'" class="tipo_FRASCO">30 C</option>

              <option value="'4'" class="tipo_FRASCO">30 Y</option>

              <option value="'8'" class="tipo_FRASCO">60 B</option>

              <option value="'7'" class="tipo_FRASCO">60 C</option>

              <option value="'6'" class="tipo_FRASCO">60 Y</option>
                      </optgroup>
                      <optgroup label="DIFUSOR" class="TIPO_DIFUSOR seleccionado">

              <option value="'17'" class="tipo_DIFUSOR">100 CAM - AMB</option>

              <option value="'18'" class="tipo_DIFUSOR">180 DIF - AMB</option>

              <option value="'19'" class="tipo_DIFUSOR">180 DIF - AMB BMX</option>

              <option value="'20'" class="tipo_DIFUSOR">180 DIF - FRA</option>

              <option value="'21'" class="tipo_DIFUSOR">180 DIF - FRA BMX</option>

              <option value="'10'" class="tipo_DIFUSOR">50 CER - AMB</option>

              <option value="'11'" class="tipo_DIFUSOR">50 CER - FRA</option>

              <option value="'12'" class="tipo_DIFUSOR">50 ELECTRICO - AMB</option>

              <option value="'13'" class="tipo_DIFUSOR">50 ELECTRICO - FRA</option>

              <option value="'16'" class="tipo_DIFUSOR">60 CAM - AMB</option>

              <option value="'14'" class="tipo_DIFUSOR">60 DIF - AMB</option>

              <option value="'15'" class="tipo_DIFUSOR">60 DIF - FRA</option>
                      </optgroup>
                      <optgroup label="CREMA" class="TIPO_CREMA">

              <option value="'23'" class="tipo_CREMA">CRE 50</option>
                      </optgroup>
                      <optgroup label="DESODORANTE" class="TIPO_DESODORANTE">

              <option value="'22'" class="tipo_DESODORANTE">DES 50</option>
                      </optgroup>
                  </select>

Итак, я сделал эту функцию:

    function cargaInicial(){
        $(".optgroup").click(function(){
          var clase = $( this ).find("span").text();
            if($(".TIPO_"+clase).eq(0).hasClass("seleccionado")){
            $(".TIPO_"+clase).removeClass("seleccionado");
            $(".tipo_"+clase).prop("selected",false).parents("select").formSelect();              
          }else{  
            $(".TIPO_"+clase).addClass("seleccionado");
            $(".tipo_"+clase).prop("selected",true).parents("select").formSelect();        
          }         
          cargaInicial();
        })
      }

          cargaInicial();

Когда я выбираю всю группу, он добавляет класс "seleccionado" к optgroup, чтобы я мог знать, если выбрано или нет. Каждый раз, когда я нажимаю на него, я должен заново назначать событие каждому классу optgroup.
Конечно, это работает, потому что мои метки - это отдельные слова, если у вас есть классы с несколькими словами, вы должны заменить каждый пробел другим символом.
Это было решением, которое я нашел. Если бы у кого-то было лучшее решение, это было бы очень здорово!