Select2 in Sweet Alert 2?

Question

I would like to make a multiple input popup with Sweet Alert2, and one of these input fields should be a select with multiple choices . I tried select2 multiple in some pages like in this example:

<select class="js-example-basic-multiple" name="states[]" multiple="multiple">  
    <option value="AL">Alabama</option>
 ...<option value="WY">Wyoming</option> 
</select>

With the plugin:

$(document).ready(function() {
   $('.js-example-basic-multiple').select2(); 
});

I tried to insert the HTML code in the custom html description of sweet alert configuration, but it has no effect. It is possibile to insert a select2 in a swal2? Thanks

Terrel

Answer 1

Ok, in fact it is possibile, I used the swal2 method onOpen, and I loaded there the select2 plugin, using my custom html code:

                   swal({
                    title: "Messaggio",
                    html: html,
                    confirmButtonColor: '#26C281',
                    confirmButtonText: 'Salva',
                    confirmButtonColor: '#26C281',
                    showCancelButton: true,
                    cancelButtonText: 'Chiudi',
                    cancelButtonColor: '#EF4836',
                    focusConfirm: false,
                    onOpen: function () {
                        $('.select2').select2({
                            minimumResultsForSearch: 15,
                            width: '100%',
                            placeholder: "Seleziona",
                            language: "it"
                        });
                    },

Terrel

I didn't mean to add an answer, I just meant to say thank you, this saved me some time! – Yoruba

You're welcome! I'm happy that my solution was helpful to someone – Terrel

Right now when I'm looking at sweetalert2.github.io v10.15.5 docs, onOpen is depreciated in favour of didOpen – Babbitt

Answer 2

the above answer is work but if dropdown of select2 opened in under of swal2 alert use this CSS

    .select2-container--open {
    z-index: 99999999999999;
    }

Andromache

Four 9s should be enough – Cycle

Answer 3

.select2-container--open {
z-index: 99999999999999;
}

That works better :)

Unequaled

Thanks for your contribution. To help others understand how that solves the issue, can you please edit your question and add an explanation? – Quarterage

Answer 4

I had to change the select2 dropdown container to the swal modal to fix some z-index and positioning issues.

swal.fire({
    html: htmlContent,
    ...
    didOpen: function () {
        $("#swal2-html-container .select2").select2({
            ...
            dropdownParent: $('#swal2-html-container')
        });
    }
})

Vocation

Answer 5

You could use this approach too, for the problem of the not seeing the dropdown list, especially if you don't want to define a CSS rule

   $('select[name=your_name]').on('select2:open', ()=>{
        $('.select2-container').css('z-index', 99999999);
    });

Percent