JQuery refresh select box

user1202278 picture user1202278 · Feb 21, 2012 · Viewed 116.5k times · Source

I am populating a select field using JQuery on page load using this method

 $('#select').append('<option value="' + result + '">' + result + '</option>'); 

However this leaves the select box 'blank', i.e the first value in the options list is not preselected as the selected option.

How do I 'refresh' this list so that the first value is preselected?

Sorry - should have said it was JQuery mobile before

Thank you.

Answer

Didier Ghys picture Didier Ghys · Feb 21, 2012

You can add a "selected" attribute to the option element you'd like to be selected:

$('#select')
    .append('<option value="' + result + '" selected="selected">' + result + '</option>'); 

You don't specify how you populate exactly you select element, using a loop, you could do like this:

var data = ['a', 'b', 'c'];
var $select = $('#select'); // you might wanna empty it first with .empty()

for (var i = 0; i < data.length; i++) {
    var o = $('<option/>', { value: data[i] })
        .text(data[i])
        .prop('selected', i == 0);
    o.appendTo($select);
}​

DEMO


So it seems you are using jQuery Mobile like you said in the comment.

If you are using the selectmenu widget, you need to programmatically refresh after you make programmatic change to its content/structure:

$select.selectmenu("refresh", true);

Documentation