Блог

Поскольку у меня есть элемент выбора 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, а также в пределах его значений параметров. Я попытался использовать метод, приведенный ниже.

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

Вы можете использовать .multiselect-container , который создается плагином, чтобы получить все выбранные значения. Итак, всякий раз, когда вы выбираете какие-либо параметры, они добавляются в ul > li with class active , поэтому используйте .active get выбранное значение параметра и get использование группы опций $(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>