Синхронизировать 2 элемента Select2 - PullRequest
Новая
       57

Синхронизировать 2 элемента Select2

1 голос
/ 08 октября 2019 
 $("#s1").select2(options1);
 $("#s2").select2(options2);

 $("#s1").on("select2:selecting", function(e) {
   // doSomethingThatSynchronizesS1withS2();
 });

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

1 Ответ

1 голос
/ 08 октября 2019

Вместо использования метода обратного вызова для select2:selecting необходимо использовать метод обратного вызова для события change.

При изменении элемента s1 необходимо получить выбранные значенияэлемент s1, а затем обновите элемент s2, используя эти значения. Это синхронизирует s2 с s1. 

        $('#s1').on('change', function (e) {
              var selectedValues = $(this).val();  //Get the selected Values
              $('#s2').val(selectedValues);        //Update S2 with selected values.
        });

Вы должны иметь такой же метод обратного вызова, чтобы синхронизировать s1 и s2.

Это обновит значения в обоих полях выбора. Однако, как вы заметили, это не будет отражено в пользовательском интерфейсе. Чтобы получить выбранные значения, отраженные в пользовательском интерфейсе, вам нужно вручную вызвать метод изменения, как показано ниже: 

        $('#s1').on('change', function (e) {
              var selectedValues = $(this).val();  //Get the selected Values
              $('#s2').val(selectedValues);        //Update S2 with selected values.
              $('#s2').trigger('change');          //Trigger the change event to reflect values.
        });

        $('#s2').on('change', function (e) {
              var selectedValues = $(this).val();  //Get the selected Values
              $('#s1').val(selectedValues);        //Update S1 with selected values.
              $('#s1').trigger('change');          //Trigger the change event to reflect values.
        });

Вот где это становится сложным. В событии изменения s1 вы вручную запускаете событие изменения s2, а в событии изменения s2 вы снова запускаете событие изменения s1. Это приводит к бесконечному циклу. Чтобы исправить это, мы можем использовать другую переменную triggerManual. Ниже приведен весь код 

        $("#s1").select2();
        $("#s2").select2();
        var triggerManual = false; //use this variable to avoid never ending loop.
        $('#s1').on('change', function (e) {
              if( triggerManual ) {
                return;
              }
              var selectedValues = $(this).val();
              $('#s2').val(selectedValues);
              changeSelValues();
        });

        $('#s2').on('change', function (e) {
              if( triggerManual ) {
                return;
              }
              var selectedValues = $(this).val();
              $('#s1').val(selectedValues);
              changeSelValues();
        }); 

        function changeSelValues() {
            triggerManual = true; //set the global variable as true.
            $('#s1').trigger('change');
            $('#s2').trigger('change');

            triggerManual = false; //set it again to false
        }

Значение обновляется при выборе или отмене выбора любого значения в s1 и наоборот.

Вы можете проверить демонстрацию в JSFiddle

...