jQuery: change content of <option> elements
- by piquadrat
I have a select widget with a couple of AJAX enhancements.
<select id="authors">
<option value="1">Foo Bar</option>
<option value="2" selected="selected">Bar Baz</option>
</select>
Now, if the selected option changes, I want to change the "content" ("Foo Bar" and "Bar Baz" in the example). How can I do that with jQuery? I tried the following, but obviously, it doesn't work.
$('#authors').change(function(){
$('#authors option[selected=selected]').html('new content');
});
/edit: to clarify, the selector '#authors option[selected=selected]' works fine, it selects the correct option DOM element. But .html('new content') does nothing.
2nd edit: OK, this is embarassing. I tried my code in Chrome's JavaScript console, where it didn't have any effect. After jAndy clearly demonstrated that it works in jsFiddle, I tried it in the FireBug console, and there it works. Lesson learned :-)
