同步 2 个 Select2 元素

Question

 $("#s1").select2(options1);
 $("#s2").select2(options2);

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

我有两个 select2 元素，我想保持同步。因此，每次我在这些元素之一中选择一个值时，我都希望另一个元素选择完全相同的值。

Answer 1

您需要在

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。

这将更新两个选择框中的值。然而，正如您所注意到的，这不会反映在用户界面中。要在 UI 中反映所选值，您需要手动触发更改方法，如下所示：

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

查看演示

Answer 2

$('#s1').change(function(e, data){
    if (!data?.programmaticTrigger) {
        $('#s2').trigger('change', {
            programmaticTrigger: true
        });
    }
});

$('#s2').change(function(e, data){
    if (!data?.programmaticTrigger) {
        $('#s1').trigger('change', {
            programmaticTrigger: true
        });
    }
});