Question

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

这是我的自定义处理程序，因此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选择器不熟悉，但是从选择菜单中获取当前选择的选项的方法只是使用value绑定：

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

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

还可以确保您实际上不需要绑定处理程序中的大多数代码。您需要在$(element).selectpicker()方法中调用init，但这应该就足够了。

使用敲除和引导程序选择器获取下拉值时遇到问题

1 个答案: