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

Question

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>

Answer 1

you can use the below

$('#mySelect').empty()

and then rebind the new data.

Answer 2

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"
});

Answer 3

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

Answer 4

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);
}