如何在引导多选中实现 optgroups（淘汰赛绑定）

Posted 2023-03-27

【中文标题】如何在引导多选中实现 optgroups（淘汰赛绑定）

【英文标题】：How to implement optgroups in bootstrap multiselect (Knockout binding)

【发布时间】：2019-03-04 12:00:34

【问题描述】：

我使用淘汰赛 JS 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>   

【参考方案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>