[英]How to make the selectedValue allow case-insensitive set
I want to be able to set the value of a knockout observable
that is the value
of a select
with case-insensitivity
. 我希望能够设置一个knockout
observable
的value
,它是一个case-insensitivity
的select
value
。 So in my below example passing justin
would set the selectedValue
to Justin
. 所以在我的下面的例子中,传递
justin
会将selectedValue
设置为Justin
。
HTML HTML
<select id="people" data-bind="options: peopleList, value: selectedPerson, optionsCaption: 'Choose...'">
</select>
JS JS
function MyViewModel(defaultPerson) {
var self = this;
self.selectedPerson = ko.observable(defaultPerson);
self.peopleList = ko.observableArray(["Justin", "Sam", "Chris", "John"]);
}
$(function(){
var person = 'justin';
var viewModel = new MyViewModel(person);
ko.applyBindings(viewModel);
});
You can can render options by yourself and don't use options
binding. 您可以自己渲染选项,也不要使用
options
绑定。 This will allow you to convert value to lowercase: 这将允许您将值转换为小写:
<select id="people" data-bind="value: selectedPerson, optionsCaption: 'Choose...'">
<option value=''>Choose...</option>
<!-- ko foreach: peopleList -->
<option data-bind='value: $data.toLowerCase(), text: $data'></option>
<!-- /ko -->
</select>
Use optionsValue
and optionsText
bindings to render entries "as is" while keeping value case-insensitive. 使用
optionsValue
和optionsText
绑定“按原样”呈现条目,同时保持值不区分大小写。
function MyViewModel(defaultPerson) {
var self = this;
var Person = function(name) {
this.name = name;
this.ciName = name.toLowerCase();
};
self.selectedPerson = ko.observable(defaultPerson);
self.ciSelectedPerson = ko.computed(function() {
return self.selectedPerson().toLowerCase();
});
self.peopleList = ko.observableArray(
["Justin", "Sam", "Chris", "John"].map(
function(s) { return new Person(s) }));
}
Markup: 标记:
<select id="people" data-bind="options: peopleList, optionsValue: 'ciName', optionsText: 'name', value: ciSelectedPerson, optionsCaption: 'Choose...'">
</select>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.