无法通过淘汰赛和引导选择选择器获取下拉值答案

【问题标题】：Trouble getting dropdown value with knockout and bootstrap-selectpicker无法通过淘汰赛和引导选择选择器获取下拉值
【发布时间】：2019-06-02 21:34:04
【问题描述】：

我刚刚开始使用敲除，但在获取下拉列表中当前选定的值时遇到了问题。

这是我的自定义处理程序，因此 KO 将与 bootstrap-selectpicker 一起使用，我可以使用实时搜索选项。

ko.bindingHandlers.selectPicker = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        if ($(element).is('select')) { 
            if (ko.isObservable(valueAccessor())) {
                ko.bindingHandlers.value.init(element, valueAccessor, allBindingsAccessor);
            }
            $(element).selectpicker();
        }
    },
    update: function (element, valueAccessor, allBindingsAccessor) {
        if ($(element).is('select')) {
            var selectPickerOptions = allBindingsAccessor().selectPickerOptions;
            if (typeof selectPickerOptions !== 'undefined' && selectPickerOptions !== null) {
                var options = selectPickerOptions.options,
                    optionsText = selectPickerOptions.optionsText,
                    optionsValue = selectPickerOptions.optionsValue,
                    optionsCaption = selectPickerOptions.optionsCaption;
                if (ko.utils.unwrapObservable(options).length > 0) {
                    ko.bindingHandlers.options.update(element, options, ko.observable({ optionsText: optionsText, optionsValue: optionsValue, optionsCaption: optionsCaption }));
                }
            }
            if (ko.isObservable(valueAccessor())) {
                ko.bindingHandlers.value.update(element, valueAccessor);
            }
            $(element).selectpicker('refresh');
        }
    }
};

接下来我从我的数据库中填充下拉列表。

  function NewLoanViewModel() {
            var self = this;
            self.waitingLoanDutiesInfo = ko.observable(true);
            self.ErrorFromHandler = ko.observable("");
            self.offices = ko.observableArray([]);

LoadDDLs();

            function LoadDDLs() {
                $.ajax({
                    url: "/LoansX/KO/NewLoansHandler.ashx",
                    cache: false,
                    type: "POST",
                    data: { mode: 'loaddls' },
                    dataType: 'json'
                }).done(function (data) {
                    if (typeof (data.e) != "undefined") {
                        self.ErrorFromHandler(data.e[0].description);
                    }
                    else {
                        ko.mapping.fromJS(data.d[0].offices, {}, self.offices);
                        self.waitingLoanDutiesInfo(false)
                    }
                }).fail(function (jqXHR, textStatus) {
                    self.ErrorFromHandler(textStatus);
                    self.waitingLoanDutiesInfo(false)
                });
            }
}

这是我的下拉菜单的外观：

            <select class="form-control" data-bind="options: offices(),
            optionsText: 'IDNAME',
            optionsValue: 'ID',
            selectPicker: true"
            data-live-search="true">
            </select>

最后，我要做的是在单击按钮时获取下拉列表的当前值：

this.NewLoanClick = function () {
var LoanType = this.dgvtypes.optionsValue();
alert(LoanType);
}

到目前为止，我已经尝试过 NewLoanViewModel.dgvtypes.optionsValue、dgvtypes.optionsValue 等，但大多数都给我对象属性或方法错误。

任何提示将不胜感激，谢谢。

【问题讨论】：

我最近在这里回答了一个类似的问题：stackoverflow.com/a/53725553/4300023。它提供了一种将bootstrap-select 绑定到knockout 的不同方法。也许这可以帮助你。

标签： javascript knockout.js bootstrap-select knockout-3.0

【解决方案1】：

我不熟悉 Bootstrap Select 选择器，但是从选择菜单中获取当前选择的选项的方法是简单地使用 value 绑定：

<select class="form-control" data-bind="
    options: offices(),
    optionsText: 'IDNAME',
    optionsValue: 'ID',
    selectPicker: true,
    value: selectedOffice" data-live-search="true"></select>

显然，您必须在您的视图模型上创建可观察的 selectedOffice。

还很确定您实际上并不需要绑定处理程序中的大部分代码。您需要在init 方法中调用$(element).selectpicker()，但应该差不多了。

【讨论】：