CODEWITHSUNDEEP
jqueryajax
Blankman
Blankman

Reputation: 267020

Re-populate drop down list options, how to clear options list and then re-populate?

Re-populate drop down list options, how to clear options list and then re-populate?

When a event fires, I need to wipe out the current contents of the drop down list #users, and then re-populate it via ajax.

My ajax call is returning the HTML for the options like:

<option name=blah1>text1</option>
<option name=blah2>text2</option>
<option name=blah3>text3</option>

Upvotes: 6

Views: 29581

Answers (4)

Gajendra Bang
Gajendra Bang

Reputation: 3583

function(ajaxResult) {
   $('#users').html(""); //clear old options
   $('#users').html(ajaxResult);
}

Upvotes: 2

hunter
hunter

Reputation: 63522

You can just change the html of the select element using the data returned from your ajax call

$("#users").html(data);

so it would look something like this:

$.ajax({
    type: "POST",
    url: url,
    data: data,
    success: : function(data) {
        $("#users").html(data);
    }
    dataType: "HTML"
});

Upvotes: 7

shoebox639
shoebox639

Reputation: 2312

In the call back of your AJAX call, just clear out the contents of your select element and re-add those returned by the AJAX call.

function(ajaxResult) {
   $('#users').html(ajaxResult);
}

Upvotes: 0

kobe
kobe

Reputation: 15835

you can use the below

$('#mySelect').empty()

and then rebind the new data.

Upvotes: 24

Related Questions