如何在其他选择的 select 中禁用 selected 值并在单个选择的 select 中关闭 selected 选项

Question

我正在使用 Chosen select 版本 1.8.7，我有 3 个 Chosen select 并排，它从数据库 table 中提取选项。

如果我在第一个 select 选项 select 中选择了选项 1，那么在第二个和第三个选择 select 中应该禁用该选项，如果我在 select 中选择了选项 2第二个选择 select 那么应该在第一个和第三个选择 select 中禁用该值，如果我在第三个选择 select 中 select 选项 3 那么它应该在第一和第二选择 select.

我还想从 Chosen select 中删除 selected 选项，例如 multi-select，但我只想使用单个 select。我在 Chosen select.

的文档中没有找到这个

这是我的代码：

Check fiddle

<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="1">
  <option value=""></option>
  <option value="United States">United States</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Aland Islands">Aland Islands</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
</select>
<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="2">
  <option value=""></option>
  <option value="United States">United States</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Aland Islands">Aland Islands</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
</select>
<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="3">
  <option value=""></option>
  <option value="United States">United States</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Aland Islands">Aland Islands</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
</select>

//This makes chosen select the first matching result from the list
//if you wrote anything on the input element (and it matches
//anything). 
$('select').chosen();

$container1 = $('#select1').next();
$('input', $container1).change(function() {
  var value = $('.active-result:first', $container1).text();
  if (value !== undefined) {
    $('#select1').data('chosen').result_select(value);
  }
});

//Alternatively you could achieve the same with something like
//this, but it's getting a bit complicated:
var $container2 = $('#select2').next();
$('input', $container2).change(function() {
  var option_index = $('.chosen-container .active-result:first').data("option-array-index");
  if (option_index !== undefined) {
    var option_value = $('#select2 option:nth-child(' + (option_index + 1) + ')').val();
    $('#select2').val(option_value);
    $('#select2').trigger("chosen:updated");
  }
});

body {
  margin: 10px;
}

select {
  width: 200px;
}

tr>td:first-child {
  text-align: right;
  padding-right: 7px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/chosen/1.1.0/chosen.jquery.js"></script>
<table>
  <tr>
    <td>
      <label for="select1">Using Chosen#result_select method</label>
    </td>
    <td>
      <select id="select1" class="first" multiple>
        <option value="1">abc</option>
        <option value="2">def</option>
        <option value="3">ghi</option>
      </select>
    </td>
  </tr>
  <tr>
    <td>
      <label for="select2">Using other means...</label>
    </td>
    <td>
      <select id="select2" class="second" multiple>
        <option value="1">abc</option>
        <option value="2">def</option>
        <option value="3">ghi</option>
      </select>
    </td>
  </tr>
</table>

Answer 1

<form>
<div id="container">
  <div id="content">
    <div class="side-by-side clearfix">
    <select data-placeholder="Choose a Country..." id="1" class="chosen-select" tabindex="1">
                <option value=""></option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
     </select>
     <select data-placeholder="Choose a Country..." id="2" class="chosen-select" tabindex="2">
                <option value=""></option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
     </select>
     <select data-placeholder="Choose a Country..." id="3" class="chosen-select" tabindex="3">
                <option value=""></option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
    </select>
    <select data-placeholder="Choose a Country..." id="4" class="chosen-select" tabindex="4">
                <option value=""></option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
    </select>
    <select data-placeholder="Choose a Country..." id="5" class="chosen-select" tabindex="5">
                <option value=""></option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
    </select>
    <select data-placeholder="Choose a Country..." id="6" class="chosen-select" tabindex="6">
                <option value=""></option>
                <option value="United States">United States</option>
                <option value="United Kingdom">United Kingdom</option>
                <option value="Afghanistan">Afghanistan</option>
                <option value="Aland Islands">Aland Islands</option>
                <option value="Albania">Albania</option>
                <option value="Algeria">Algeria</option>
    </select>
    </div>
  </div>
</div>
<script src="https://harvesthq.github.io/chosen/docsupport/jquery-3.2.1.min.js" type="text/javascript"></script>
<script src="https://harvesthq.github.io/chosen/chosen.jquery.js" type="text/javascript"></script>
<script src="https://harvesthq.github.io/chosen/docsupport/prism.js" type="text/javascript" charset="utf-8"></script>
<script src="https://harvesthq.github.io/chosen/docsupport/init.js" type="text/javascript" charset="utf-8"></script>
</form>
<script>
var selected=[];
$.each($('.chosen-select'), function(){
    selected[$(this).attr('id')] = '';
});

$('.chosen-select').change(function() {
    var value = $(this).val();
    if(selected[$(this).attr('id')] !== ''){
        var oldValue = selected[$(this).attr('id')];
        $(this).siblings('.chosen-select').addBack().children('option').each(function() {
            if($(this).val() === oldValue)
                $(this).removeAttr('disabled').trigger('chosen:updated');
        });        
    }
    selected[$(this).attr('id')] = value;
    $(this).siblings('.chosen-select').addBack().children('option').each(function() {
        if($(this).val() === value)
            $(this).attr('disabled', true).trigger('chosen:updated');
    });
});
</script>

Answer 2

既然你说你找到了删除已经 selected 值的选项，我只研究了如何 "remove"，或者在在这种情况下，"disable"，另一个 select 中一个 select 的 selected 值。

请注意，此示例使用 jQuery，因此必须包含 jQuery 库才能正常工作。

您可以做的是让事件侦听器在您的下拉元素上触发 onchange。然后您可以检查 select 编辑了什么，以前的 select 是什么，以及是否已经制作了其他 select。

您然后通过查看之前 selected 的内容，将属性 disabled 设置为您在其他 select 中的值。如果它们匹配，则它们将被禁用。但是，如果他们不这样做，那么您再次删除 disabled 属性，以便您可以在 select 离子之间保持交替。

示例：

$(document).ready(function () {
    $(".chosen-select").change(function () {
        var value = $(this);
        var prevVal = value.data("prev");
        var otherSelects = $(".chosen-select").not(this);
        otherSelects.find('option[value="' + $(this).val() + '"]').attr('disabled', true);
        if (prevVal) {
            otherSelects.find('option[value="' + prevVal + '"]').attr('disabled', false);
        }
        value.data("prev", value.val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="1">
  <option value=""></option>
  <option value="United States">United States</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Aland Islands">Aland Islands</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
</select>
<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="2">
  <option value=""></option>
  <option value="United States">United States</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Aland Islands">Aland Islands</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
</select>
<select data-placeholder="Choose a Country..." class="chosen-select" tabindex="3">
  <option value=""></option>
  <option value="United States">United States</option>
  <option value="United Kingdom">United Kingdom</option>
  <option value="Afghanistan">Afghanistan</option>
  <option value="Aland Islands">Aland Islands</option>
  <option value="Albania">Albania</option>
  <option value="Algeria">Algeria</option>
</select>

如何在其他选择的 select 中禁用 selected 值并在单个选择的 select 中关闭 selected 选项

How to disable selected value in other chosen select & close selected option in single chosen select

html

javascript

jquery

jquery-chosen