Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Select2 in Sweet Alert 2?

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

like image 407
Alfredo Torre Avatar asked Dec 18 '22 03:12

Alfredo Torre


2 Answers

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"
                        });
                    },
like image 156
Alfredo Torre Avatar answered Dec 28 '22 10:12

Alfredo Torre


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;
    }
like image 45
Mahdi mehrabi Avatar answered Dec 28 '22 10:12

Mahdi mehrabi