jQuery: change content of <option> elements
Posted
by
piquadrat
on Stack Overflow
See other posts from Stack Overflow
or by piquadrat
Published on 2011-01-11T16:35:35Z
Indexed on
2011/01/11
16:53 UTC
Read the original article
Hit count: 289
jQuery
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 :-)
© Stack Overflow or respective owner