CODEWITHSUNDEEP
jqueryselectjquery-mobile
user1202278
user1202278

Reputation: 773

JQuery refresh select box

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?

Upvotes: 14

Views: 145407

Answers (7)

onyangofred
onyangofred

Reputation: 142

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

Upvotes: 0

marfing
marfing

Reputation: 81

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.

Upvotes: 4

Hooman Limouee
Hooman Limouee

Reputation: 1403

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

Upvotes: 1

Didier Ghys
Didier Ghys

Reputation: 30666

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

Upvotes: 23

Ashraf
Ashraf

Reputation: 2632

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>

​

Upvotes: 4

Mohora Bogdan
Mohora Bogdan

Reputation: 71

You may use

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

Upvotes: 5

gintas
gintas

Reputation: 2178

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

Upvotes: 1

Related Questions