Question

您好我想在下拉列表中为所有选项添加复选框。

我的HTML就像这样 -

＆＃13;

<div class="multi-select-dd-list"> 
    <div id="checkboxes" class="patient-list-selection">                
      <select class="patient-list-select specialty-list-left" data-bind="options : specialtiesList, optionsText : 'name'">
      </select>
    </div> 
</div>

＆＃13;

所以我在这里绑定了specialList。

我想要的是在下拉列表的每个选项之前使用复选框的方法。有什么建议吗？

Answer 1

这是实现相同代码的代码。我认为你看起来像这样。

.js，.css和.html文件

＆＃13;

while-loop

＆＃13;

function CheckableBox(label, isChecked) {
  this.label = label;
  this.isChecked = ko.observable(isChecked || false);
}

function ViewModel() {
  this.items = [
    new CheckableBox("First", true),
    new CheckableBox("Second", true),
    new CheckableBox("Third")
  ];
  
  this.selectedItems = ko.observableArray();

	/* Includes only the checked items */
  this.tempSelection = ko.pureComputed(function() {
    return this.items.filter(function(item) {
      return item.isChecked();
    });
  }, this);
  
  /* Builds a comma separated string of selected items */
  this.selectedItemsStr = ko.pureComputed(function() {
  	var str = this.selectedItems()
    	.map(function(item) {
      	return item.label;
      })
      .join(", ")
      
      return str || "-- No options selected --";
  }, this);
  
  /* Determines whether the selectable options are displayed. */
  this.optionsShown = ko.observable(false);
  
  this.optionsShown.subscribe(function() {
  	this.updateSelections();
  }, this);
  
  this.confirmSelection();
};

ViewModel.prototype.toggleOptions = function() {
	this.optionsShown(!this.optionsShown());
};

ViewModel.prototype.confirmSelection = function() {
	this.selectedItems(this.tempSelection());
  this.closeOptions();
};

ViewModel.prototype.closeOptions = function() {
  this.optionsShown(false);
}

ViewModel.prototype.updateSelections = function() {
	var selection = this.selectedItems();
  this.items.forEach(function(item) {
    item.isChecked(~selection.indexOf(item));
  });
}

ko.applyBindings(new ViewModel());

＆＃13;

* {
  box-sizing: border-box;
  font-family: sans-serif;
}

.main-container {
  width: 400px;
}

.main-container,
.select-container {
  position: relative;
}

.select-container {
  height: 2em;
}

select,
.select-container::after {
  width: 100%;
  height: 100%;
}

.select-container::after {
  content: "";
  position: absolute;
  top: 0;
  background: rgba(0,0,0,0);
  display: block;
}

.options-container {
  position: absolute;
  top: 2em;
  width: 100%;
  border: 1px solid #A9A9A9;
  background: #FFFFFF;
  display: none;
}

.options-container.shown {
  display: block;
}

label {
  display: block;
  padding: .2em;
}

label:not(:last-child) {
  border-bottom: 1px solid #FFFFFF;
}

.checked {
  background: #568ECB;
  color: white;
}

.button-container {
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #A9A9A9;
  background: #F6F6F6;
}

.button-container button {
  margin: .4em;
  margin-left: 0;
}

＆＃13;

Answer 2

    	$(document).ready(function() {
    	$('select').material_select();
    	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/css/materialize.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.5/js/materialize.min.js"></script>
     
     <div class="input-field col s12">
        <select multiple>
          <option value="" disabled selected>Choose your option</option>
          <option value="1">Option 1</option>
          <option value="2">Option 2</option>
          <option value="3">Option 3</option>
        </select>
        <label>Materialize Multiple Select</label>
      </div>

如何使用Checkbox内部选择Knockout中的选项

2 个答案: