У меня проблема с использованием select2. Я хочу изменить фильтр категорий, но когда данные в добавлении select2 не работают. как решить эту проблему?

enter image description here

$(document).on('change', '#filterbySelect1', function (event) {
    event.preventDefault();
    var selectVal = $('#filterbySelect1').val();
    if (selectVal == 'categoryBook') {
        $('.filter').append('<div class="form-group mb-5">'
            + '<label for="selectbyCategory">Filter Berdasarkan Katagori</label>'
            + '<select class="select2bs4" multiple="multiple" data-placeholder="Pilih Kategori" style="width: 100%;">'
            + '<option>Alabama</option>'
            + '<option>Alaska</option>'
            + '</select>'
            + '<small id="emailHelp" class="form-text text-muted">Maksimal memilih 3 kategori</small>'
            + '</div>');
    }
});

//Initialize Select2 Elements
$('.select2').select2();

//Initialize Select2 Elements
$('.select2bs4').select2({
    theme: 'bootstrap4',
    dropdownParent: $('.filter')
});
1
creator life 13 Фев 2021 в 09:59

1 ответ

Лучший ответ

Когда вы создаете новый выбор, инициализируйте его в случае создания вашего select2:

$(document).on('change', '#filterbySelect1', function (event) {
    event.preventDefault();
    var selectVal = $('#filterbySelect1').val();
    if (selectVal == 'categoryBook') {
        $('.filter').append('<div class="form-group mb-5">'
            + '<label for="selectbyCategory">Filter Berdasarkan Katagori</label>'
            + '<select class="select2bs4" multiple="multiple" data-placeholder="Pilih Kategori" style="width: 100%;">'
            + '<option>Alabama</option>'
            + '<option>Alaska</option>'
            + '</select>'
            + '<small id="emailHelp" class="form-text text-muted">Maksimal memilih 3 kategori</small>'
            + '</div>');
           
           //Initialize Select2 Elements
           $('.select2bs4').select2({
              theme: 'bootstrap4',
              dropdownParent: $('.filter')
           });

    }
});

//Initialize Select2 Elements <--- initialize another select2?
$('.select2').select2();

//Initialize Select2 Elements
//$('.select2bs4').select2({
//    theme: 'bootstrap4',
//    dropdownParent: $('.filter')
//});
0
Frenchy 13 Фев 2021 в 07:12