0

我有两个具有相同选项的选择输入，并且在第一个选择中更改值应该禁用第二个（包括）选择一个中的所有先前选项，并将第二个选择的值设置为第一个下一个值。我在这里设置了一个工作小提琴。

<select data-bind="options: selectList, value: firstSelect"></select>
<select data-bind="options: selectList, value: secondSelect, minVal: firstSelect"></select>

我创建了自定义绑定处理程序：

ko.bindingHandlers.minVal = {
    update: function (element, valueAccessor) {
        var firstValue = ko.utils.unwrapObservable(valueAccessor());
        var firstNext=null;
        $(element).children().each(function () {
            var $this = $(this);
            if ($this.val() <= firstValue) {
                $this.attr('disabled', 'disabled');
            } else {
                if (firstNext==undefined){
                    firstNext=$this.val();
                }                
            }
        });
        $(element).val(firstNext).trigger('change');
    }
};

并且如果您更改第一个选择它会在第二个中禁用所有先前的选项，并将第二个的值设置为第一个下一个值，但问题是当用户想要在第二个更改值时，由于更新而无法执行from custom binding 总是根据 first 设置值。所以我的问题是如何在自定义绑定中知道如何更新值，从更改 valueAccessor() 可观察或通过更改第二个选择手动更改？

4

2 回答 2

1

我认为问题在于触发更改事件。

我采用了一种稍微不同的方法将数组切片为计算值并将第二个列表绑定到该值。

html:

<select data-bind="options: selectList, value: firstSelect"></select>
<select data-bind="options: secondSelectList, value: secondSelect"></select>

Javascript：

ViewModel = function () {
    var self = this;
    self.firstSelect = ko.observable();
    self.secondSelect = ko.observable();
    self.selectList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    self.secondSelectList = ko.computed(function(){
        return self.selectList.slice(self.firstSelect(), self.selectList.length);
    }, self);
};

var vm = new ViewModel();
ko.applyBindings(vm);

在这里提琴：

http://jsfiddle.net/QDpPk/

于 2013-01-23T00:47:59.527 回答
1

我找到了解决方案，这是纯粹的逻辑问题。在更新值之前询问新值（手动选择表单更改选择选项）是否大于应从自定义绑定中选择的值，您将能够将值更改为您想要的值。

if (firstNext >= $(element).val()) {
    $(element).val(firstNext);
    $(element).change();
}

这是更新的小提琴：http: //jsfiddle.net/9gGjq/4/

于 2013-01-24T11:44:55.340 回答