Bootstrap 多选获取 optgroup 和 option 的值

Question

因为我有一个 select 元素 optgroup，其值也与之绑定。这是我下面的结构。

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

现在我正在像下面这样使用 bootstrap multiselect。

$('#example-dataprovider-optgroups').multiselect({
                enableFiltering: false,
                enableClickableOptGroups: true,
                includeSelectAllOption: true,
});

将 optgroup 设为可点击。现在我需要 optgroup 的值以及它的 option 值。我尝试使用下面的方法。

$("#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"));
            })

我怎样才能从两者中获得价值..？

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

Answer 1

您可以使用插件创建的 .multiselect-container 来获取所有 selected 的值。因此，每当您 select 任何选项时，它都会在 ul > li 下添加 class active，因此使用 .active 获取 selected 选项值并获取选项组使用 $(this).prevAll(".multiselect-group:first").text() .

演示代码（您提供的 html 具有重复值，我在那里添加了虚拟值）：

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

Bootstrap 多选获取 optgroup 和 option 的值

Bootstrap multiselect to get values of optgroup and option

javascript

jquery

bootstrap-4

bootstrap-multiselect