select2 display не обновляет текст метки, но значение меняется

Я использую select2 v4.0.3 вместе с JQuery. Я инициализирую свои селекторы как:

$("#datatype").select2({
        theme: "classic"
        }); 

 $("#unit").select2({
        theme: "classic"
        });

Затем я хочу обнаружить изменение #datatype и изменить значение #unit, что я делаю следующим образом:

$("#datatype").on('select2:select',function () {
    $("#unit").val('21'); //udpate unit type to be 'none'
    });

Проблема в том, что значение #unit устанавливается равным 21, но отображаемая метка для этого селектора не обновляется. Какие-либо предложения ?

Похоже, что select2 не знает о событии или что он не был правильно настроен для прослушивания изменений. Я не уверен, что решение. Я новичок в веб-технологиях.


jquery-select2 jquery-select2-4 select2
person marc    schedule 23.07.2016    source источник

Ответы (2)


arrow_upward
8
arrow_downward

После изучения документации по Select2 любые .val() обновления должны сопровождаться $('#unit').trigger('change');

Итак, в моем случае код должен выглядеть так

$("#datatype").on('select2:select',function () {
    $('#unit').val('21'); // Select the option with a value of '21'
    $('#unit').trigger('change'); // Notify any JS components that the value changed
});

Обратите внимание, что это верно только для select2 версии 4 и выше.

Я бы также порекомендовал людям перейти на версию 4, так как вы можете делать прямые вызовы для изменения значений без необходимости указывать initSelect()

person marc    schedule 25.07.2016

arrow_upward
3
arrow_downward

Используя select2 v4.0, вы также можете вызвать событие change.select2 для обновления отображаемой метки. Это предотвращает побочные эффекты от других компонентов, прослушивающих событие изменения.

$("#datatype").on('select2:select',function () {
    $('#unit').val('21'); // Select the option with a value of '21'
    $('#unit').trigger('change.select2'); // Notify only Select2 of changes
});
person Martin D.    schedule 07.08.2019