如何使用淘汰赛从下拉列表中获取选定的值
How to get selected value from drop down list using knockout
所以我正在使用 knockout 并尝试在我的 javascript 更改事件中获取所选项目的 ID。这是我的 html
<div id="platforms" data-bind="with: platformsViewModel">
<p>
Selected Platform:
<select data-bind="options: platforms, optionsText: 'displayName', value: 'id', optionsCaption: 'Choose...', event: { change: loadMedias }" ></select>
</p>
</div>
我的视图模型如下
my.viewModels.PlatformsViewModel = function () {
var self = this;
self.platforms = ko.observableArray();
self.message = ko.observable();
self.loadMedias = function (data, event) {
my.loadMedias(data.id);
}
}
我在这里错过了什么?
看起来这可能是一个简单的修复,您可能在其中使用 value
绑定,而您应该使用 optionsValue
绑定:
<select data-bind="options: platforms, optionsText: 'displayName', optionsValue: 'id', optionsCaption: 'Choose...', event: { change: loadMedias }" ></select>
<!-- ^ here -->
但是,为什么不将逻辑放在视图模型中,而不是放在您的视图中:
my.viewModels.PlatformsViewModel = function () {
var self = this;
self.platforms = ko.observableArray();
self.message = ko.observable();
//new observable to hold selected platform
self.selectedPlatform = ko.observable();
//subscribe to changes in the observable value to trigger the loading
self.selectedPlatform.subscribe(function(newValue) {
my.loadMedias(newValue.id);
});
}
更新后的 <select>
将绑定所选的实际平台对象,而不仅仅是其 ID:
<select data-bind="options: platforms, optionsText: 'displayName', value: selectedPlatform, optionsCaption: 'Choose...'" ></select>
Html:
<select name="ddlUsers" id="ddlUsers" class="form-control"
data-bind="options: ViewModel.CashierPage.AvailableCash, optionsText: 'OptionTextInfo', value: ViewModel.CashierPage.CashSelected, optionsCaption: 'Cassa...'"></select>
在 js 中:
public CashSelected: KnockoutObservable();
...
self.CashSelected = ko.observable(null);
self.CashSelected.subscribe(function(valueNewValue){/*your code*/});
所以我正在使用 knockout 并尝试在我的 javascript 更改事件中获取所选项目的 ID。这是我的 html
<div id="platforms" data-bind="with: platformsViewModel">
<p>
Selected Platform:
<select data-bind="options: platforms, optionsText: 'displayName', value: 'id', optionsCaption: 'Choose...', event: { change: loadMedias }" ></select>
</p>
</div>
我的视图模型如下
my.viewModels.PlatformsViewModel = function () {
var self = this;
self.platforms = ko.observableArray();
self.message = ko.observable();
self.loadMedias = function (data, event) {
my.loadMedias(data.id);
}
}
我在这里错过了什么?
看起来这可能是一个简单的修复,您可能在其中使用 value
绑定,而您应该使用 optionsValue
绑定:
<select data-bind="options: platforms, optionsText: 'displayName', optionsValue: 'id', optionsCaption: 'Choose...', event: { change: loadMedias }" ></select>
<!-- ^ here -->
但是,为什么不将逻辑放在视图模型中,而不是放在您的视图中:
my.viewModels.PlatformsViewModel = function () {
var self = this;
self.platforms = ko.observableArray();
self.message = ko.observable();
//new observable to hold selected platform
self.selectedPlatform = ko.observable();
//subscribe to changes in the observable value to trigger the loading
self.selectedPlatform.subscribe(function(newValue) {
my.loadMedias(newValue.id);
});
}
更新后的 <select>
将绑定所选的实际平台对象,而不仅仅是其 ID:
<select data-bind="options: platforms, optionsText: 'displayName', value: selectedPlatform, optionsCaption: 'Choose...'" ></select>
Html:
<select name="ddlUsers" id="ddlUsers" class="form-control"
data-bind="options: ViewModel.CashierPage.AvailableCash, optionsText: 'OptionTextInfo', value: ViewModel.CashierPage.CashSelected, optionsCaption: 'Cassa...'"></select>
在 js 中:
public CashSelected: KnockoutObservable();
...
self.CashSelected = ko.observable(null);
self.CashSelected.subscribe(function(valueNewValue){/*your code*/});