Updating select box options via jQuery AJAX?

Question

Is there some type of plugin to do this? The server will return JSON content containing the option labels and values.

I can do this manually, I just wanted to see if there was an easier way.

Answer 1

Loop through the json and do this on each text/value pair (works cross-browser nicely):

var opt = document.createElement('option');
opt.value = "someValue";
opt.appendChild(document.createTextNode("someText"));
$('#mySelect').append(opt);

Answer 2

I literally just loop though the items in the list, and generate the html, before inserting the html into the element. There is probably a plugin now you mention it.

var selectHtml = ''
foreach obj Item in jsonobject.list)
  selecthtml += "<option value="+ item.value +">" + item.label + "</option>"

$('selectList').html(selectHtml);

Or something similar

Answer 3

I use javascript, jQuery and AJAX way to update the select box with JSON data in the following way. Its pretty clean and concise and does the job perfectly.

$.getJSON(url, data, function(responseJSON){ // GET JSON value from the server
    $("#mySelect option").remove(); // Remove all the <option> child tags from the select box.
    $.each(responseJSON.rows, function(index, item) { //jQuery way of iterating through a collection
        $('#mySelect').append($('<option>')
            .text(item.label)
            .attr('value', item.value));
                });
            });