I have a select with many optgroup. I want to select different options, so I added multiple to the select tag, but I also want to select all the group when I click his group title. The problem is that I'm using Materialize, so I can't work directly on the <select>. Here is the html code.
<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>
And here is the generated code by Materialize for the previous 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>
I need to know how I could select/deselect all the group only by clicking the title. Thank you
I finally have the answer. I modified the select and added classes to each optgroup and option. The classes are:
<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>
So, I made this function:
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();
When I select an entire group, it adds the class "seleccionado" to the optgroup so I can know if it's selected or not. Every time I click on it, I must re-asign the event to each optgroup class.
Of course this works because my labels are single words, if you have classes with multiple words you'd must replace each space with another character.
This was the solution I found. If someone had a better solution, it would be very great!