Изменить значение множественного выбора 2 на основе значения в другом выборе 2 - PullRequest
0 голосов
/ 02 марта 2020

У меня есть 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 et c, на который ссылаются многие другие ответы.

Я пытался:

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

, но опять же, это не работает.

Как мне обновить значение всех вторичных select2?

1 Ответ

0 голосов
/ 03 марта 2020

В конце концов, я понял, что нет необходимости вызывать что-либо, связанное с 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');
                });
            }
        }
    });
});
...