javascript - 如何在 bootstrap multiselect(Knockout 绑定(bind))中实现 optgroups

Question

我使用 knockout JS 实现了 bootstrap 多选 binding .如何在这里实现optgroups？

https://jsfiddle.net/DivyaYandra/a9v0c4m8/

  <select id="select1" multiple="multiple" class="form-control" data-bind="options: availableValues, selectedOptions: selectedValues, multiselect: {
    includeSelectAllOption: true
  }"></select>   

Answer 1

这与您的示例不完全匹配，但这是我使用父/子类集使其工作的方式。

var ViewModel = /** @class */ (function () {
    function ViewModel() {
        this.listing = [];
        this.selected = ko.observable([]);
        for (var x = 1; x < 10; x++) {
            this.listing.push(new Parent(x));
        }
    }
    return ViewModel;
}());

var Parent = /** @class */ (function () {
    function Parent(parentId) {
        this.name = "Parent " + parentId.toString();
        this.children = [];
        for (var x = 1; x < 5; x++) {
            this.children.push(new Child((parentId * 100) + x));
        }
    }
    return Parent;
}());

var Child = /** @class */ (function () {
    function Child(childId) {
        this.display = "Child " + childId.toString();
        this.value = childId;
    }
    return Child;
}());

$(function () {
    var viewModel = new ViewModel();
    ko.applyBindings(viewModel);
});

.multiselect-group {
  background-color: #ddd;
  margin-top: 15px;
}

.dropdown-menu>li>a {
  padding: 0;
  }

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/css/bootstrap-multiselect.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.15/js/bootstrap-multiselect.min.js"></script>



<div class="container-fluid">
  <div class="row">
    <div class="col-sm-6">
      <select multiple="multiple" class="form-control" data-bind="foreach: listing, selectedOptions: selected, multiselect: { includeSelectAllOption: true, dropRight: false, numberDisplayed: 3, enableFiltering: false }">
	<optgroup data-bind="attr: {label: name}, foreach: children">
		<option data-bind="text: display"></option>
	</optgroup>
</select>
    </div>
    <div class="col-sm-6">
      <ul class="list-group" data-bind="foreach:selected">
        <li class="list-group-item" data-bind="text:$data"></li>
      </ul>
    </div>
  </div>
</div>