Отключите опцию 2-го поля выбора, если выбрано - PullRequest
Новая
       11

Отключите опцию 2-го поля выбора, если выбрано

0 голосов
/ 19 февраля 2019

У меня есть два поля выбора, используя плагин select2 js.Оба раскрывающихся списка имеют одинаковые параметры.Я хочу отключить опцию, выбранную во втором окне выбора, если она выбрана в первом и наоборот.

Вот код: 

jQuery(document).ready(function() {
  jQuery('.minimal').select2();
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select class="minimal" name="coin1">
  <option value="btc">btc</option>
  <option value="usd">usd</option>
  <option value="eth">eth</option>
</select>

<select class="minimal" name="coin2">
  <option value="btc">btc</option>
  <option value="usd">usd</option>
  <option value="eth">eth</option>
</select>

Ответы [ 2 ]

0 голосов
/ 19 февраля 2019

См. Комментарии к коду ниже: 

$(document).ready(function() {
  $('.minimal')
    .select2()
    .change(function() {                      // when changed
      let val = $(this).val();                // save the current value
      $('.minimal').not(this).find('option')  // grab options from other select
        .prop('disabled', function() {        // disable those equal to current value
          return $(this).val() == val;
        })
        .select2();                           // re-establish select2
    });
});


$(document).ready(function() {
  $('.minimal')
    .select2()
    .change(function() {
      let val = $(this).val();
      $('.minimal').not(this).find('option').prop('disabled', function() {
        return $(this).val() == val;
      }).select2();
    });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select class="minimal" name="coin1">
  <option value="btc">btc</option>
  <option value="usd">usd</option>
  <option value="eth">eth</option>
</select>

<select class="minimal" name="coin2">
  <option value="btc">btc</option>
  <option value="usd">usd</option>
  <option value="eth">eth</option>
</select>
0 голосов
/ 19 февраля 2019

Я погрузился в документацию , и это должно сработать:

Это одна функция для обоих вариантов выбора, и для различия используется атрибут name. 

jQuery(document).ready(function() {
  jQuery('.minimal').select2();
});

$('select.minimal').on('select2:select', function(e) {

  let elem;
  elem = ($(this).attr("name") == "coin1") ? 2 : 1; //set the elementIndex

  //reset
  $('select[name="coin' + elem + '"] > option').removeAttr("disabled");
  $('select[name="coin' + elem + '"]').select2();

  const value = $(this).select2('data')[0].text; //select the value
  $('select[name="coin' + elem + '"] > option[value="' + value + '"]').attr("disabled", true);

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>

<select class="minimal" name="coin1">
  <option value="btc">btc</option>
  <option value="usd">usd</option>
  <option value="eth">eth</option>
</select>

<select class="minimal" name="coin2">
  <option value="btc">btc</option>
  <option value="usd">usd</option>
  <option value="eth">eth</option>
</select>
...