select2 change value inside of modal doesn't work
<style type="text/css">
/* this will fix the size of select2 */
.select2-container {
width: 100% !important;
}
</style>
//============================
// SOLUTION THAT MIGHT NOT WORK
//============================
//Remove tabindex="-1" on your modal
$("#mySelect2").select2();
//attach the dropdown to the modal
dropdownParent: $("#myModal")
// Do this before you initialize any of your modals
$.fn.modal.Constructor.prototype.enforceFocus = function() {};
//============================
// RESET VALUE IF YOU WANT THE SELECT TO BE DYNAMIC
//============================
$('#mySelect2').html('').select2({data: [{id: '', text: ''}]});
//============================
// IF YOU WANT TO SET EXISTING VALUE
//============================
$("#mySelect2").select2("trigger", "select", {
data: { id: "1",text:"admin" }
});
//============================
// DATA SOURCE AJAX CALL
//============================
$('#mySelect2').select2({
width: 'resolve',
ajax: {
url: 'url',
type: "GET",
dataType:"json",
data: function (params) {
var query = {
search: params.term,
type: 'public'
}
// Query parameters will be ?search=[term]&type=public
return query;
},
processResults: function (result) {
return {
results: $.map(result.data, function (item) {
return {
text: item.product_ID,
id: item.product_Name
}
})
};
}
}
});