嗨我想添加下拉列表中的所有選項複選框。如何使用內部的複選框選擇選項在敲除
我的HTML是這樣的 -
<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>所以在這裏我結合specialtiesList。
我想要的是在下拉菜單的每個選項之前使用複選框的方法。 有什麼建議嗎？
下面是實現相同的代碼。我認爲你看起來像這樣。
的.js，.css和.html文件
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();
\t /* 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() {
\t var str = this.selectedItems()
\t .map(function(item) {
\t 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() {
\t this.updateSelections();
}, this);
this.confirmSelection();
};
ViewModel.prototype.toggleOptions = function() {
\t this.optionsShown(!this.optionsShown());
};
ViewModel.prototype.confirmSelection = function() {
\t this.selectedItems(this.tempSelection());
this.closeOptions();
};
ViewModel.prototype.closeOptions = function() {
this.optionsShown(false);
}
ViewModel.prototype.updateSelections = function() {
\t var selection = this.selectedItems();
this.items.forEach(function(item) {
item.isChecked(~selection.indexOf(item));
});
}
ko.applyBindings(new ViewModel());* {
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;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<div class="main-container">
<div class="select-container" data-bind="click: toggleOptions">
<select data-bind="options: [selectedItemsStr]"></select>
</div>
<div class="options-container" data-bind="css: { 'shown': optionsShown }">
<div class="options" data-bind="foreach: items">
<label data-bind="css: { 'checked': isChecked }">
<input type="checkbox" data-bind="checked: isChecked">
<span data-bind="text: label"></span>
</label>
</div>
<div class="button-container">
<button type="button" data-bind="click: confirmSelection">OK</button>
<button type="button" data-bind="click: closeOptions">Cancel</button>
</div>
</div>
</div>如果我回答了您的問題，請不要忘記加註。 –
\t $(document).ready(function() {
\t $('select').material_select();
\t });<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>
標準選擇小部件是不是很個性化。您將需要更換小部件。 http://stackoverflow.com/questions/10026321/html5-multiselect-dropdown-with-checkboxes-plugin-designed-as-standard-select –