JQuery Bootstrap selectpicker показать optgroup

Question

вот демо

  <select class="selectpicker" multiple name="selectpickerdemo"
      id="selectpickerdemo"> 
    <optgroup label="Label 1">
      <option value='a'>a</option>
      <option value='b'>b</option>
    </optgroup>
    <optgroup label="Label 2">
      <option value='c'>c</option>
      <option value='d'>d</option>
    </optgroup> 
  </select>

, когда я использую selectpicker и выбираю один или несколько вариантов, он показывает как a,b или a,c,d, я хочу показать как Label1-a,b или Label1-a,Label2-c,d

спасибо за помощь!

Answer 1

Попробуйте это ...

$(document).on('change', '.selectpicker', function() {
  var SelectedValues = [];
  $(this).find('optgroup').each(function() {
    var OptionGroupSelected = [];
    $(this).find('option').each(function() {
      if ($(this).prop('selected')) {
        OptionGroupSelected.push($(this).val());
      }
    });
    if (OptionGroupSelected.length > 0) {
      var Label = $(this).attr('label').replace(' ', '');
      SelectedValues.push(Label + '-' + OptionGroupSelected.join(','));
    }
  });
  console.log(SelectedValues);
});

Вот скрипка