Jquery – Updating select box options via jQuery AJAX

ajaxjqueryplugins

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.

Best Solution

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

Related Solutions

Javascript – How to remove all the options of a select box and then add one option and select it with jQuery

$('#mySelect')
    .find('option')
    .remove()
    .end()
    .append('<option value="whatever">text</option>')
    .val('whatever')
;

Javascript – the best way to add options to a select from a JavaScript object with jQuery

The same as other answers, in a jQuery fashion:

$.each(selectValues, function(key, value) {   
     $('#mySelect')
         .append($("<option></option>")
                    .attr("value", key)
                    .text(value)); 
});

Best Solution

Related Solutions

Javascript – How to remove all the options of a select box and then add one option and select it with jQuery

Javascript – the best way to add options to a select from a JavaScript object with jQuery

Related Question