JQuery refresh select box

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?

Crenel

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

Mini

Perhaps this is a problem with JQuery mobile forms select fields as none of these examples are pre selecting a value, yes in that (for example on an iPhone, when you view the select for there is a blue tick next to the selected value) but on the load the select box is white. Very odd. – Crenel

You should specify you are using jquery mobile, this is pretty important information ! Are you using the selectmenu widget ? – Mini

@DidierGhys The DEMO fiddle isn't working for me, it just says the page doesn't exist. – Aran

Answer 2

You may use

$('#select').removeAttr('selected').find('option:first').attr('selected', 'selected');

Trimolecular

Perhaps this is a problem with JQuery mobile forms select fields as none of these examples are pre selecting a value, yes in that (for example on an iPhone, when you view the select for there is a blue tick next to the selected value) but on the load the select box is white. Very odd. – Crenel

Answer 3

Simply .. you set the value whatever you want , i.e : $('#select').val(5); .. so in your case its $('#select').val(result);

Edit : a full working example included :

<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<select id='select'></select>
<br>
<input type=button onclick='addNew()' value='Add'>

<script>
function addNew()
{
        var result = Math.floor(Math.random()*1000);
        $('#select').append('<option value="' + result + '">' + result + '</option>'); 
        $('#select').val(result);           
} 
</script>

​

Samsun

I'm afraid that's not solving it, still empty preselected option :( – Crenel

Perhaps this is a problem with JQuery mobile forms select fields as none of these examples are pre selecting a value, yes in that (for example on an iPhone, when you view the select for there is a blue tick next to the selected value) but on the load the select box is white. Very odd. – Crenel

Answer 4

Hi after several research, I solved with this piece of code:

$('#select_id').empty();    
$('#select_id').append($('<option>',{text: 'pippo', value: 'pippo', selected: true}))
$('#select_id').change();

Hope it helps.

Hallowmas

Answer 5

Not all browsers refresh select automatically after you add a new option.

One trick which works for me is hiding and showing the select box just after adding new options to it. So in your case:

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

As for selecting the correct newly added option, follow with:

 $('select').val(result);

Ewing

Answer 6

Mohora Bogdan's answer only works once, then if you select another option it doesn't work any more.

In order to make it reusable use :

$('#select').prop('selected', false).find('option:first').prop('selected', true);

Brantley

Answer 7

$('#ControlIDHere').val('YourValueHere');
$('#ControlIDHere').change();

Contumacious

Thank you for your interest in contributing to the Stack Overflow community. This question already has a few answers—including one that has been reasonably validated by the community. Are you certain your approach hasn’t been given previously? If so, it would be useful to explain how your approach is different, under what circumstances your approach might be preferred, and/or why you think the previous answers aren’t sufficient. Can you kindly edit your answer to offer an explanation? – Cauca