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: 282

Filed under:

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

Related posts about jQuery