我想通过knockout js将数组转换为选择选项,我知道这种情况有3种方法,但这些方法都不能完美地满足我真正想要的,我想要的是:
- 设置默认选项
选择一个选项
- 获取选定的值
- 设置选项的
attr
每个方法都有自己的问题,但最后一个方法有默认选项,可以获取选定的值,但无法设置attr
,有什么想法吗?
方法一:
错误:
Uncaught Error: The binding 'value' cannot be used with virtual elements
状态:不工作
function myfunc() {
var self = this;
self.estimate = ko.observableArray([]);
self.selectedValue = ko.observable();
var obj = [{
method_title: "blah blah",
price: "1000"
},
{
method_title: "blah blah 2",
price: "2000"
}
];
self.estimate(obj);
self.selectedValue.subscribe(function(value) {
alert(value);
});
}
ko.applyBindings(new myfunc());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select id="method">
<option value="0">Choose an option</option>
<!-- ko foreach: estimate, value: selectedValue -->
<option data-bind="text: method_title,
attr: { 'data-price': price, 'value': method_title },
text: method_title"></option>
<!-- /ko -->
</select>
方法2:
状态:正在工作,但我无法添加默认选项,它每次都会循环。
function myfunc() {
var self = this;
self.estimate = ko.observableArray([]);
self.selectedValue = ko.observable();
var obj = [{
method_title: "blah blah",
price: "1000"
},
{
method_title: "blah blah 2",
price: "2000"
}
];
self.estimate(obj);
self.selectedValue.subscribe(function(value) {
alert(value);
});
}
ko.applyBindings(new myfunc());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select id="method" data-bind="foreach: estimate,value: selectedValue">
<option value="0">Choose an option</option>
<option data-bind="text: method_title,attr: {'data-price': price, value: method_title}"></option>
</select>
方法3:
状态:正在工作,但我无法设置attr
function myfunc() {
var self = this;
self.estimate = ko.observableArray([]);
self.selectedValue = ko.observable();
var obj = [{
method_title: "blah blah",
price: "1000"
},
{
method_title: "blah blah 2",
price: "2000"
}
];
self.estimate(obj);
self.selectedValue.subscribe(function(value) {
alert(value);
});
}
ko.applyBindings(new myfunc());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select id="method" data-bind="value: selectedValue,options: estimate,
optionsText: 'method_title',
optionsValue: 'method_title',
optionsCaption: 'Choose an option'"></select>
最佳答案
你的第一个方法最有希望,所以我已经纠正了它。您不需要使用value
绑定(bind)在 foreach
环形。它必须在 <select>
中使用,而且效果很好。
function myfunc() {
var self = this;
self.estimate = ko.observableArray([]);
self.selectedValue = ko.observable();
var obj = [{
method_title: "blah blah",
price: "1000"
},
{
method_title: "blah blah 2",
price: "2000"
}
];
self.estimate(obj);
self.selectedValue.subscribe(function(value) {
console.log(value);
});
}
ko.applyBindings(new myfunc());
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.4.2/knockout-min.js"></script>
<select id="method" data-bind="value: selectedValue">
<option value="0">Choose an option</option>
<!-- ko foreach: estimate -->
<option data-bind="text: method_title,
attr: { 'data-price': price, 'value': method_title }"></option>
<!-- /ko -->
</select>
关于javascript - ObservableArray 在 KnockOut JS 中选择选项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53096810/