Issue
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?
Solution
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:
Hope this helps.
Answered By - icyrock.com
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.