How to refresh select2 dropdown?
You can use something like this:
$(phone_category).val(value);
$(phone_category).trigger('change');
where value
is the value of option you want to set.hope this help! :)
jquery select2 refresh data
Try emptying the select2 options before to update data, this because by default it appends data to existing options.
$('.select2-slot').empty();
$('.select2-slot').select2({
data: data.slots
});
How to refresh a div without losing the style and plugin (select2) using jquery
you need to re-initiate the select2 plugin after every refresh of your div element.
because select2 gets bind via script once you called .select2() on your select tag, and whenever you refresh the div element in which your select tag is there, the binding will be removed, and it will became normal default select dropdown. So for binding it again you have to rebind it.
You can try these ways to do it.
$("#test").select2();
or
$("#test").select2("refresh");
Update select2 data without rebuilding the control
select2 v3.x
If you have local array with options (received by ajax call), i think you should usedata
parameter as function returning results for select box:var pills = [{id:0, text: "red"}, {id:1, text: "blue"}];
$('#selectpill').select2({
placeholder: "Select a pill",
data: function() { return {results: pills}; }
});
$('#uppercase').click(function() {
$.each(pills, function(idx, val) {
pills[idx].text = val.text.toUpperCase();
});
});
$('#newresults').click(function() {
pills = [{id:0, text: "white"}, {id:1, text: "black"}];
});
FIDDLE: http://jsfiddle.net/RVnfn/576/In case if you customize select2 interface with buttons, just call updateResults
(this method not allowed to call from outsite of select2 object but you can add it to allowedMethods
array in select2 if you need to) method after updateting data array(pills in example).
select2 v4: custom data adapter
Custom data adapter with additionalupdateOptions
(its unclear why original ArrayAdapter
lacks this functionality) method can be used to dynamically update options list (all options in this example):$.fn.select2.amd.define('select2/data/customAdapter',
['select2/data/array', 'select2/utils'],
function (ArrayAdapter, Utils) {
function CustomDataAdapter ($element, options) {
CustomDataAdapter.__super__.constructor.call(this, $element, options);
}
Utils.Extend(CustomDataAdapter, ArrayAdapter);
CustomDataAdapter.prototype.updateOptions = function (data) {
this.$element.find('option').remove(); // remove all options
this.addOptions(this.convertToOptions(data));
}
return CustomDataAdapter;
}
);
var customAdapter = $.fn.select2.amd.require('select2/data/customAdapter');
var sel = $('select').select2({
dataAdapter: customAdapter,
data: pills
});
$('#uppercase').click(function() {
$.each(pills, function(idx, val) {
pills[idx].text = val.text.toUpperCase();
});
sel.data('select2').dataAdapter.updateOptions(pills);
});
FIDDLE: https://jsfiddle.net/xu48n36c/1/select2 v4: ajax transport function
in v4 you can define custom transport method that can work with local data array (thx @Caleb_Kiage for example, i've played with it without succes)docs: https://select2.github.io/options.html#can-an-ajax-plugin-other-than-jqueryajax-be-used
Select2 uses the transport method defined in ajax.transport to send
requests to your API. By default, this transport method is jQuery.ajax
but this can be changed.
$('select').select2({
ajax: {
transport: function(params, success, failure) {
var items = pills;
// fitering if params.data.q available
if (params.data && params.data.q) {
items = items.filter(function(item) {
return new RegExp(params.data.q).test(item.text);
});
}
var promise = new Promise(function(resolve, reject) {
resolve({results: items});
});
promise.then(success);
promise.catch(failure);
}
}
});
BUT with this method you need to change ids of options if text of option in array changes - internal select2 dom option element list did not modified. If id of option in array stay same - previous saved option will be displayed instead of updated from array! That is not problem if array modified only by adding new items to it - ok for most common cases.FIDDLE: https://jsfiddle.net/xu48n36c/3/
how to update data in select2 dropdown using ajax
I don't really understand your question and think it needs some clarifying - but as far as I could understand (I ran into this problem and found your question when Googleing it...)
When I first load the page I run the following JavaScript so that all of my drop-down select boxes are styled and using select2:
$('select').select2();
But as your title states, my code below works by updating the drop-down to a new set of data -where my /store/ajax_get_zones
function returns HTML for the options:$(function() {
$('#country').on('change', function() {
$.post("/store/ajax_get_zones", {
country_id: $('#country').val()
}, function(e) {
if (e)
$("#state").html(e).select2();
})
});
});
All you have to do is call .select2()
on the element after you update the data.Screen Shots
Start with the default United States:
Then when you change the country the state drop-down changes as well (ajax updated the inner HTML of the original select while still themed to select2
Related Topics
How to Check Is Timezone Identifier Valid from Code
Str_Replace() for Multiple Value Replacement
Get the Get Variables from a Url String
PHP Error: Cannot Use Object of Type Stdclass as Array (Array and Object Issues)
How to Disable the Back Browser Button After User Press Logout and Destroy Session
Use PHP to Check If Page Was Accessed with Ssl
Zend Framework 2 Routing Subdomains to Module
Different Timezone_Types on Datetime Object
In a PHP5 Class, When Does a Private Constructor Get Called
Cannot Set Date.Timezone in PHP.Ini File
How to Automatically Read in Calculated Values with PHPexcel
How to Convert Ldap Timestamp to Unix Timestamp
Create a Zip File Using PHP Class Ziparchive Without Writing the File to Disk
Convert Windows Timestamp to Date Using PHP on a Linux Box
Symfony 2.7 Cache:Clear Command Checks Every Database Connection