As I have a select element optgroup with values also bonded with it. Here is a structure I have below.
<select id="example-dataprovider-optgroups" multiple="multiple">
<optgroup label="Lime No. 2" value="b3a2eff6-5351-4b0f-9861-0d47e136517d">
<option value="90b4365b-9ddc-4c08-9e42-03662d73d923" label="Chimneys and Towers"></option>
<option value="6a7d30d8-e500-476f-a2c6-7adfb47a3e00" label="Height Safety"></option>
<option value="eb89ab4a-0431-4ed2-b6ba-a0c1bc91b0f0" label="Lightning Protection"></option>
</optgroup>
<optgroup label="Lime No. 4" value="42da4f3e-1944-4f42-a5b7-350871cbffea">
<option value="90b4365b-9ddc-4c08-9e42-03662d73d923" label="Chimneys and Towers"></option>
<option value="6a7d30d8-e500-476f-a2c6-7adfb47a3e00" label="Height Safety"></option>
<option value="eb89ab4a-0431-4ed2-b6ba-a0c1bc91b0f0" label="Lightning Protection"></option>
</optgroup>
<optgroup label="Lime No. 1" value="46ec4dec-e669-4829-b99a-5ac64340eb84">
<option value="90b4365b-9ddc-4c08-9e42-03662d73d923" label="Chimneys and Towers"></option>
<option value="6a7d30d8-e500-476f-a2c6-7adfb47a3e00" label="Height Safety" selected="selected"></option>
<option value="eb89ab4a-0431-4ed2-b6ba-a0c1bc91b0f0" label="Lightning Protection"></option>
</optgroup>
</select>
Now as I'm using bootstrap multiselect like this below.
$('#example-dataprovider-optgroups').multiselect({
enableFiltering: false,
enableClickableOptGroups: true,
includeSelectAllOption: true,
});
With optgroup as clickable. Now I require values of optgroup as well as within its option values as well. I tried using the method below.
$("#example-dataprovider-optgroups").each(function (index, item) {
console.log(index);
console.log(item);
$(item).find('li').each(function (index1, item2) {
console.log(item2);
});
//console.log(item.find("multiselect-item multiselect-group active"));
//console.log(item.find("option:selected"));
})
How can I achieve to get values from both..?
Update 1:
$("#example-dataprovider-optgroups").find("optgroup").each(function (index, item) {
console.log(index);
console.log(item);
console.log($(item).find(":selected")); // i don't get selected value from optgroup
})
You can use .multiselect-container
which is created by the plugin to get all values which is selected . So, whenever you select any options it is added under ul > li
with class active
so using .active
get selected option value and to get option group use $(this).prevAll(".multiselect-group:first").text()
.
Demo Code(Your provided html was having duplicate values i have added dummy values there ) :
$(document).ready(function() {
$('#example-dataprovider-optgroups').multiselect({
enableFiltering: false,
enableClickableOptGroups: true,
includeSelectAllOption: true,
});
$("button").click(function() {
console.clear()
//loop through ul > li which has class active (selected)
$(".multiselect-container").find("li.active:not(.multiselect-group)").each(function(index, item) {
//get li value and get group name
console.log("Selected -- " + $(this).text() +"Values - "+$(this).find("input[type=checkbox]").val()+ " From Group -" + $(this).prevAll(".multiselect-group:first").text()+"Values - "+$(this).prevAll(".multiselect-group:first").find("input[type=checkbox]").val());
})
})
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" />
<select id="example-dataprovider-optgroups" multiple="multiple">
<optgroup label="Lime No. 2" value="b3a2eff6-5351-4b0f-9861-0d47e136517d">
<option value="90b4365b-9ddc-4c08-9e42-03662d73d923" label="Chimneys and Towers"></option>
<option value="6a7d30d8-e500-476f-a2c6-7adfb47a3e00" label="Height Safety"></option>
<option value="eb89ab4a-0431-4ed2-b6ba-a0c1bc91b0f0" label="Lightning Protection"></option>
</optgroup>
<optgroup label="Lime No. 4" value="42da4f3e-1944-4f42-a5b7-350871cbffea">
<option value="90b4365b-9ddc-4c08-9e42-03662d73d922" label="Chimneys and Towers4"></option>
<option value="6a7d30d8-e500-476f-a2c6-7adfb47a3e03" label="Height Safety4"></option>
<option value="eb89ab4a-0431-4ed2-b6ba-a0c1bc91b0f3" label="Lightning Protection4"></option>
</optgroup>
<optgroup label="Lime No. 1" value="46ec4dec-e669-4829-b99a-5ac64340eb84">
<option value="90b4365b-9ddc-4c08-9e42-03662d73d9231" label="Chimneys and Towers1"></option>
<option value="6a7d30d8-e500-476f-a2c6-7adfb47a3e001" label="Height Safety1"></option>
<option value="eb89ab4a-0431-4ed2-b6ba-a0c1bc91b0f01" label="Lightning Protection1"></option>
</optgroup>
</select>
<button> Click me !</button>