Javascript 使用Materialize中的Optgroup选择多个_Javascript_Jquery_Html_Materialize

Javascript 使用Materialize中的Optgroup选择多个

javascript jquery html

Javascript 使用Materialize中的Optgroup选择多个,javascript,jquery,html,materialize,Javascript,Jquery,Html,Materialize,我有一个带有许多optgroup的select。我想选择不同的选项，所以我在select标记中添加了multiple，但我还想在单击他的组标题时选择所有组。问题是我使用的是Materialize，因此无法直接处理。下面是html代码 <select name="AGREGA_PRODUCTO" id="AGREGA_PRODUCTO" multiple="" tabindex="-1"> <option value="" disabled="" s

我有一个带有许多

optgroup

的select。我想选择不同的选项，所以我在select标记中添加了

multiple

，但我还想在单击他的组标题时选择所有组。问题是我使用的是Materialize，因此无法直接处理

。下面是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>


乌诺·马亚斯酒店
100
15
25
30摄氏度
30岁
60 B
60摄氏度
60岁
100凸轮-电磁轴承
180 DIF-AMB
180 DIF-AMB BMX
180 DIF-FRA
180 DIF-FRA BMX
50 CER-AMB
50 CER-FRA
50电动-电磁轴承
50电气-FRA
60凸轮-电磁轴承
60 DIF-AMB
60 DIF-FRA
CRE 50
DES 50

下面是Materialize为前面的select生成的代码

<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>


选择
FRASCO
100
15
25
30 C
30 Y
60 B
60 C
60 Y
DIFUSOR
100凸轮-电磁轴承
180 DIF-AMB
180 DIF-AMB BMX
180 DIF-FRA
180 DIF-FRA BMX
50 CER-AMB
50 CER-FRA
50电气-电磁轴承
50电气-FRA
60凸轮-电磁轴承
60 DIF-AMB
60 DIF-FRA
CREMA
CRE 50
脱臭剂
DES 50

我需要知道如何仅通过单击标题来选择/取消选择所有组。谢谢你，我终于有答案了。我修改了

select

并向每个

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>

当我选择整个组时，它会将类“seleccionado”添加到optgroup
中，这样我就可以知道它是否被选中。每次单击它时，我都必须将事件重新分配给每个optgroup类

当然，这是有效的，因为我的标签是单个单词，如果你有多个单词的类，你必须用另一个字符替换每个空格。

这就是我找到的解决办法。如果有人有更好的解决方案，那就太好了
    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();