Question

I’ve got a grid with dropdown in every row and I need to render it’s state from DB.
So I’ve got dropdowns defined like that with selected option specified for preselecting the value from DB.

<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>​

The problem is in that when I change the value of a dropdown defined like that in a browser it changes on UI but selected attribute don’t move and stays where it was.
So when I then call $(“#selectId”).val() I get the old one value.

What’s the appropriate way to initialize dropdown control and then have an ability to freely change it’s value in browser or by jQuery?

Answer 1

This seems to be working fine (Firefox on Ubuntu):

HTML

<select id='selectId'>
<option value='1'>Option 1</option>
<option value='2' selected='selected'>Option 2</option>
<option value='3'>Option 3</option>
</select>

JS

$('#selectId').change(function() {
    var opt = $(this).find('option:selected');
    console.log([opt.val(), opt.text()]);   
});

var opt_sel = $('#selectId option:selected');
opt_sel.val(99);
opt_sel.text('Changed option');

If you select the options, you’ll see that it will print the changed version. Working example:

• http://jsfiddle.net/vm4Q8/

Hope this helps.