Question

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?

Answer 1

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