如何創建一組下拉列表，使列表隨着您的選擇而減少？

Question

我有這樣的HTML表單：

所有下拉列表均包含相同的列表： Option 1, Option 2, Option 3 ，並且用戶需要為每個鍵選擇一個值。 這可以按預期工作，無需擔心：

但是，我想對此進行增強。 Keys和Options List都可以變得相對較大（例如20）。 可能存在一對一的映射，您不能在兩個地方選擇一個值。 但是，當列表很大時，很容易出錯，並在兩個地方選擇相同的值。 我們進行了一些客戶端驗證來檢查重復項，但是我希望通過從其他下拉菜單中刪除選定的選項，使用戶無法再次選擇它 ， 從而獲得良好的用戶體驗。 像這樣：

我該怎么辦？

最終解決方案

我最初選擇了Knockout解決方案，但經過深思熟慮，我更喜歡Rick Hitchcock的普通JQuery解決方案，因為我可以輕松地將其插入任何地方而無需任何其他設置。 這是我修改Rick解決方案以使其更可重用的方法：

    function reducingDropdowns(dropDownSelector){
        var $dropdowns = $(dropDownSelector);
        $dropdowns.change(function() {
            // First enable all options.
            $dropdowns.find('option').prop('disabled', false);

            // Then for each dropdown, get its current value and
            // disable that option in other dropdowns.
            $dropdowns.each(function() {
                var $currDropdown= $(this);
                var currDropdownValue= $currDropdown.val();
                if(currDropdownValue !== ''){
                    var $otherDropdowns = $dropdowns.not($currDropdown);
                    $otherDropdowns.find('option').each(function() { 
                        var $option = $(this);
                        var optionIsAlreadySelected = $option.val() === currDropdownValue;
                        if(optionIsAlreadySelected)
                            $option.prop('disabled', true);
                    }); 
                }
            });
        });     
    }

現在，您可以為所有相關的下拉列表提供一個通用類，並在需要的任何地方調用類似的名稱：

reducingDropdowns('.myDropdownClass');

謝謝大家的幫助。

PS：我也意識到，對於我的應用程序，我寧願禁用已使用的選項，而不是將其從列表中完全刪除。

Answer 1

這是一種非常簡單的方法，可以提高效率，但這是基本思想：

HTML

<select data-bind="value: value1, options: options1, optionsCaption: ''"></select>
<select data-bind="value: value2, options: options2, optionsCaption: ''"></select>
<select data-bind="value: value3, options: options3, optionsCaption: ''"></select>

查看模型

var self = this;

this.options = ko.observableArray(['Option 1', 'Option 2', 'Option 3']);

this.value1 = ko.observable();
this.value2 = ko.observable();
this.value3 = ko.observable();

this.options1 = ko.computed(function() {
    return ko.utils.arrayFilter(this.options(), function(f) {
        return f != self.value2() && f != self.value3();
    });
}, this);

this.options2 = ko.computed(function() {
    return ko.utils.arrayFilter(this.options(), function(f) {
        return f != self.value1() && f != self.value3();
    });
}, this);

this.options3 = ko.computed(function() {
    return ko.utils.arrayFilter(this.options(), function(f) {
        return f != self.value1() && f != self.value2();
    });
}, this);

JSFiddle

Answer 2

您可以像這樣隱藏使用的選項：

$('select').change(function() {
  $('option').show();

  $('select').each(function() {
    var val= $(this).val();
    $(this).siblings('select')
      .find('option')
      .filter(function() {
        return $(this).val() === val && $(this).val() !== '';
      })
      .hide();
  });

});

工作小提琴＃1

---

刪除項目的另一種方法是禁用它們：

$('select').change(function() {
  $('option').prop('disabled', false);

  $('select').each(function() {
    var val= $(this).val();
    $(this).siblings('select')
      .find('option')
      .filter(function() {
        return $(this).val() === val && $(this).val() !== '';
      })
      .prop('disabled', true);
  });

});

工作小提琴＃2

Answer 3

甚至有一種更干凈，更輕松的方式來執行此操作： http : //jsfiddle.net/ejs1d3zb/5/

$(function () {

    $('select').change(function (){
    var val = $(this).val();
    $('select option[value='+val+']').not(this.children).remove(); 

    });
});

Answer 4

有一個OnChange事件應該具有某種已采取和可用的列表，並針對每個comobbox進行檢查