Как отключить выбранное значение в другом выбранном выборе и закрыть выбранный вариант в одном выбранном выборе

Question

Я использую Chosen select Версия 1.8.7, у меня есть 3 Chose select рядом, он вытягивает опции из таблицы базы данных.

Если я выберу вариант 1 в первом Chosen selectтогда эта опция должна быть отключена во втором и третьем выбранном выборе, если я выберу опцию 2 во втором выбранном выборе, то это значение должно быть отключено в первом и третьем выбранном выборе, если я выберу опцию 3 в третьем выбранном выборе, то она должнабыть отключенным в первом и втором выбранном выборе.

Также я хочу удалить выбранный вариант из выбранного выбора, например, множественный выбор, но я хочу использовать только один выбор.Я не нашел этого в документации по Chosen select.

Вот мой код:

Проверка скрипки

<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

Так как вы сказали, что нашли возможность удалить уже выбранное значение, я работал только над тем, как вы можете "удалить" , или в этом случае "отключить" ,выбранное значение из одного выбора в другом выборе.

Обратите внимание, что в этом примере используется jQuery, и поэтому для его работы потребуется включить библиотеку jQuery.

Что вы можете сделать, так этоиметь прослушиватель событий, который запускает onchange на ваших выпадающих элементах.Затем вы можете проверить, что было выбрано, какие были предыдущие выборки, и были ли сделаны другие выборки за пределами этих.

Затем вы устанавливаете атрибут disabled на свое значение вдругие выбирает, глядя на то, что было ранее выбрано.Если они совпадают, то они становятся инвалидами.Однако, если они этого не делают, то вы снова удаляете атрибут disabled , чтобы вы могли продолжать чередовать выбор.

Пример:

$(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>

Answer 2

<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>