Jquery 同步2个Select2元素

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

与在

select2:selection上使用回调方法不同，您需要在
change
事件上使用回调方法

更改
s1
元素时，需要获取s1元素的选定值，然后使用这些值更新
s2
元素。这将使s2与s1同步

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

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

您还需要使用类似的回调方法来同步s1和s2

这将更新两个选择框中的值。但是，正如您所注意到的，这不会反映在UI中。要获得反映在UI中的选定值，您需要手动触发更改方法，如下所示：

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

这就是它变得棘手的地方。在s1的变更事件中，您手动触发s2的变更事件，在s2的变更事件中，您再次触发s1的变更事件。这将导致一个永无止境的循环。要解决这个问题，我们可以使用另一个变量
triggerManual
。下面是整个代码

        $('#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中的任何值时，该值将更新，反之亦然

您可以在
处查看演示，或者，为了避免无休止的递归，可以使用额外参数：
$（'#s1'）.trigger（'change'，{manual:true}）和
$（“#s1”）。在（“更改”上，函数（e，extraParam）{if（！extraParam.manual）{/**doSynchronization（）**/}）
        $("#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
        }