Select2: получить предыдущее выбранное значение опции из моего первого выбора - PullRequest
Новая
       20

Select2: получить предыдущее выбранное значение опции из моего первого выбора

0 голосов
/ 17 мая 2019

У меня 2 выпадающих списка select2.

1) Поставьте некоторую проверку, когда значение уже выбрано в select 1, теперь оно будет отключено в select 2.

2) Теперь, если пользователь изменит значение select 1, значение предыдущего в select 1 теперь будет включено в select 2 

Example

Select 1 = A - selected
           B
           C
Select 2 - A - disabled
           B 
           C 

User changed the value in Select 1

Select 1 - A
           B
           C - selected
Select 2 - A - will now enable.
           B
           C - disabled

Вопрос: Как включить предыдущее значение первого выбранного значения в select 1?

Jquery 

$(document).on('select2:select', '#warehouse_from', function(e){
        //send ajax request
        var id         = $(this).val(); 
        var val        = $('#warehouse_from option:selected').text();
        $('select#warehouse_to>option[value="'+id+'"]').attr('disabled','disabled');
        getItemsByWarehouse(id);
        e.preventDefault();
        return false;
    });

1 Ответ

0 голосов
/ 17 мая 2019

Как только пользователь взаимодействует с одним select2 выпадающим меню ... Игра окончена. Экземпляр не может быть изменен. Таким образом, свойство disabled, которое вы можете программно установить на элемент original select, не будет отражаться ...

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

См. Комментарии в коде.

CodePen 

$(document).ready(function() {

  // On page load instantiation for both select2
  $('.example').select2();

  // On change handler for the 1st select
  $(document).on('change', '#one', function(e){

    // To avoid too many lookups... Store the second select in a variable
    var two = $("#two");

    // If the selected value in 1st select is ALREADY selected in 2nd select, clear it.
    if( two.val() == $(this).val() ){
      two.val(null);
    }

    // Reset the select2 instance (destroy and re-instantiate),
    // Reset the disabled properties
    // Disable the right option
    two.select2('destroy').select2();
    two.find("option").prop("disabled",false);
    two.find("[value='"+$(this).val()+"']").prop("disabled",true);
  });

});
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.7/css/select2.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.7/js/select2.min.js"></script>

<select class="example" id="one">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>

<select class="example" id="two">
  <option value="A">A</option>
  <option value="B">B</option>
  <option value="C">C</option>
</select>
...