无法通过剔除和 bootstrap-selectpicker 获取下拉值

Question

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

这是我的自定义处理程序，因此 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 等等，但大多数都给我对象属性或方法错误。

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

Answer 1

我不熟悉 Bootstrap Select 选择器，但是从 select 菜单中获取当前 selected 选项的方法是简单地使用 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()，但仅此而已。

无法通过剔除和 bootstrap-selectpicker 获取下拉值

Trouble getting dropdown value with knockout and bootstrap-selectpicker

javascript

knockout.js

bootstrap-select

knockout-3.0