0

同じオプションを持つ 2 つの選択入力があり、最初の選択で値を変更すると、2 番目に選択したもの (含む) の以前のオプションがすべて無効になり、2 番目の選択の値が最初の次の値に設定されます。ここで作業フィドルをセットアップしました。

<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');
    }
};

そして、最初の選択を変更すると、2番目の以前のオプションがすべて無効になり、2番目の値が最初の次の値に設定される場合に機能しますが、問題は、ユーザーが2番目の値を変更したい場合、更新のために変更できませんでしたfrom custom binding は常に first に従って値を設定しています。私の質問は、valueAccessor() オブザーバブルの変更から、または 2 番目の選択を変更して手動で、カスタムバインディングで値がどのように更新されるかを知る方法です。

4

2 に答える 2

1

私は解決策を見つけました。それは純粋な論理的な問題でした。値を更新する直前に、新しい値 (変更された選択オプションから手動で選択) が、カスタム バインドから選択する必要がある値よりも大きいかどうかを尋ねます。値を必要な値に変更できます。

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

これが更新されたフィドルです：http://jsfiddle.net/9gGjq/4/

于 2013-01-24T11:44:55.340 に答える
1

問題は、変更イベントのトリガーにあると思います。

配列を計算値としてスライスし、2 番目のリストをそれにバインドするという、少し異なるアプローチを取りました。

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 に答える