Herald Charley Herald Charley -4 years ago 275
jQuery Question

how to update data in select2 dropdown using ajax

I have a select2 dropdown for location.select2 data is initialised on page load.I want to update the data at regular intervals using ajax.But when I update the data of select2 the select2 dropdown becomes read only

allowClear: true,
minimumInputLength: 1,
data:{ results: locationls, text: function(item) { return item.text; }},
formatSelection: format,
formatResult: format

Answer Source

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:


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)

All you have to do is call .select2() on the element after you update the data.

Screen Shots

Start with the default United States:

Starting/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

Changing the country results in the changing of the state dropdown

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download