如何使用淘汰赛从下拉列表中获取选定的值

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*/});