使用knockout和bootstrap-selectpicker获取下拉值时出现问题

Question

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

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

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菜单中获取当前选定选项的方法是简单地使用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()，但这应该差不多了。