javascript - HTML 多选更改 'None selected' 文本

Question

我有一个带有多选选项的选择列表:

<select data-bind="attr:{'id':'multilistS'+Id()},foreach: Hlist" multiple="multiple">
     <option data-bind="click:$root.changeShole,value:$data.Id, text:N,attr:{'selected':$data.Sel}">Cheese</option>
</select>

但我想更改“未选择”文本。可以使用 nonSelectedText 选项在 HTML 代码中或仅在 JavaScript 中执行此操作吗？

Answer 1

您确实应该听取 John Pavek 的建议来阅读选项绑定(bind)。 Knockout 专门为此提供了很好的工具，但您的构建没有使用它们。

noneselectedtext 似乎是 jQuery-UI multiselect widget 的一项功能。如果您正在使用它，那么您将需要使用 binding handler for it .

这是您所描述内容的一个简单示例，其中一条消息会根据是否选择了多选中的任何内容而变化。

const vm = {
  optionsCaption: ko.pureComputed(function() {
    return (vm.selectedOptions().length === 0) ? 'Please select at least one' : 'ok';
  }),
  selectedOptions: ko.observableArray([]),
  Hlist: ko.observableArray([{
    Id: 1,
    N: 'One'
  }, {
    Id: 2,
    N: 'Two'
  }])
};

ko.applyBindings(vm);

<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<div data-bind="text: optionsCaption"></div>
<select data-bind="options: Hlist, optionsText: 'N', optionsValue: 'Id', selectedOptions: selectedOptions" multiple="multiple">
</select>
<div data-bind="foreach: selectedOptions">
  <div data-bind="text:$data"></div>
</div>