Is it possible to open a modal box up from a select2 box

I am very very new to select2 and it’s capabilities. What I need to do is have a button at the end of a select2 list which brings up a popup modal that then allows the user to add more information and details.

Is this possible?

This is what I currently have:

 $("#s2").select2({
    placeholder: "Select users",
    width: '100%',
    allowClear: !0,
    closeOnSelect: false,
    maximumSelectionLength: 2,
    ajax: ---> gets my data from  service
}).on('select2:select', function (e) {
    if ($(this).select2('data').length >= 2) {
        $(this).select2("close");
    }
});

Is there any way to open a modal from within the select2 list?

Answer

$('#SELECT_ID').select2({
    ajax: {        
    },
   // other params
   ...
   //
          
}).on('select2:open', () => {
    $(".select2-results:not(:has(a))").append('<a href="#" style="padding: 6px;height: 20px;display: inline-table;" onclick="addNewItem()">ADD NEW</a>');
});

function addNewItem() {
  // Show modal with "Add form"    
}

After adding new item to DataBase just close modal and check dropdown in select2.

Leave a Reply

Your email address will not be published. Required fields are marked *