根据另一个select2中的值更改多个select2的值答案

【问题标题】：Change value of multiple select2 based on value in another select2根据另一个select2中的值更改多个select2的值
【发布时间】：2020-03-02 20:30:32
【问题描述】：

我有一个包含值列表的 select 2，我希望能够使用它根据初始选择填充许多 select 2 下拉列表。

<select id='fonts'>
<option value=""></option>
<option value="Times">Times</option>
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
</select>

<select name="s1" class='font'>
<option value=""></option>
<option value="Times">Times</option>
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
</select>

<select name="s2" class='font'>
<option value=""></option>
<option value="Times">Times</option>
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
</select>

<select name="s3" class='font'>
<option value=""></option>
<option value="Times">Times</option>
<option value="Arial">Arial</option>
<option value="Verdana">Verdana</option>
</select>

当不使用 select2 时，它正在使用：

    $( document ).ready(function() {
        $('#fonts').on('change', function() {
            if (confirm('Are you sure?')) {

                var font=$(this).val();

                if (font!="") {
                    $( ".font" ).each(function() {
                        // $(this).select2('val', font);
                        $(this).val(font);
                    });
                }
            }
        });
    });

但是，只要我引入 select2，值就不会改变。 Select2 没有通过 AJAX 等加载，许多其他答案都提到了。

我试过了：

$(this).select2('val', font);

但同样，这不起作用。

如何更新所有二级select2的值？

【问题讨论】：

标签： jquery jquery-select2 jquery-select2-4

【解决方案1】：

最后我想通了，不需要调用任何与 select2 相关的东西，所以只要 val 就可以了，但我还缺少第二种方法来“通知”select2 已更新

$( document ).ready(function() {
    $('#fonts').on('change', function() {
        if (confirm('Are you sure?')) {

            var font=$(this).val();

            if (font!="") {
                $( ".font" ).each(function() {
                    $(this).val(font);
                    $(this).trigger('change');
                });
            }
        }
    });
});

【讨论】：