如何在引导多选(挖空绑定)中实现选择组

Question

我使用挖空JS绑定实现了引导多选。如何在这里实现选择组？

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>