javascriptjquerybootstrap-4bootstrap-multiselect

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

Solution

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