如何限制选择列表 - 在 KnockoutJS 中只选择一项

Posted 2023-03-27

【中文标题】如何限制选择列表 - 在 KnockoutJS 中只选择一项

【英文标题】：How to limit select list - to select only one item in KnockoutJS

【发布时间】：2019-01-18 17:53:34

【问题描述】：

如何限制选择列表只选择一项？ 可以通过css来实现吗？

<select multiple data-bind="options: Items,             
                   optionsText: 'Title',
                   value: selectedItems, optionsValue: 'Id',
                   attr:  name: 'item' "></select>


<div data-bind="text: selectedItems"></div>



function ViewModel() 
    var self = this;  
    var    selection = [];
    self.selectedItems = ko.observableArray();
    self.Items = ko.observableArray(["Id": "0",  "Title": "Item1", 
     "Id": "1", "Title": "Item2",  "Id": "2", "Title": "Item3"]);    


ko.applyBindings(new ViewModel());

http://jsfiddle.net/s95wezu2/1/

【问题讨论】：

你能用一句话解释multiple属性的作用吗？

这与 CSS 或 Knockout 无关。只知道多重属性的作用w3schools.com/tags/tag_select.asp

【参考方案1】：

我不确定您的要求。您可以使用size 属性代替multiple。这将限制用户选择多个选项，但会显示所有选项。

function ViewModel() 
    var self = this;  
    var    selection = [];
    self.selectedItems = ko.observableArray();
    self.Items = ko.observableArray(["Id": "0",  "Title": "Item1", 
     "Id": "1", "Title": "Item2",  "Id": "2", "Title": "Item3"]);    


ko.applyBindings(new ViewModel());

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select size = 3 data-bind="options: Items,             
                   optionsText: 'Title',
                   value: selectedItems, optionsValue: 'Id',
                   attr:  name: 'item' "></select>


<div data-bind="text: selectedItems"></div>

你不需要 CSS。