CODEWITHSUNDEEP
javascriptjquerybootstrap-4bootstrap-multiselect
user13381500
user13381500

Reputation:

Bootstrap multiselect to get values of optgroup and option

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

Upvotes: 2

Views: 2882

Answers (1)

Swati
Swati

Reputation: 28522

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>

Upvotes: 1

Related Questions