如何防止在选定的 jQuery 多选中连续出现重复条目​​？

Question

我有几行选择框很少。每行有几个选择框，内容相同。行中的每一项只能使用一次，因为每一列都有一个分类。如果在选择框中使用了某个项目，我希望它在该行的其他框中显示为灰色。 我试过这个：

  function setChosen() {
    var config = {
  '.chosen-select' : {},
  '.chosen-select-deselect': {allow_single_deselect:true},
  '.chosen-select-no-single' : {disable_search_threshold:10},
  '.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
  '.chosen-select-width' : {width:'95%'}
    }
    for(var selector in config) {
    $(selector).chosen(config[selector]);
  }
 }
 setChosen();
 $('.chosen-select').on('change', function() {
   var selVal = $(this).val();
   var rel = $(this).attr('rel');
   $('.'+rel).children('option').each(function() {
    if($(this).val() == selVal) {
      $(this).attr('disabled',true).siblings().removeAttr('disabled').trigger('chosen:updated');
  }
 });
});

fiddle

Answer 1

我会这样做：

从触发onchange 事件的选择中，我们可以使用jQuery 的parent() 在DOM 中向上移动到其父级。然后选择该父级中的所有select 元素。迭代每个选择。首先将选项重置回enabled，最后禁用与触发事件的选择的选定值匹配的选项。

 $('.chosen-select').on('change', function() {
    var self = this; //create a reference to the owner of the event.
    var selVal = $(this).val(); //selected value
    var parent = $(this).parent(); //select parent row

    //traverse all children in that row that are selects
    parent.children('select').each(function() {
        $(this).find("option").attr("disabled", false); //set all disabled attributes to false. Basically a reset!
        if (this != self) //skip the select that is the owner of the event
        {
           //set the other options to disabled that matches the value of the select.
           $(this).find("option[value='"+selVal+"']").attr("disabled", true);
        }
    });
});