Change content of <option> elements
<p>I have a <code>select</code> widget with a couple of AJAX enhancements.</p>

<pre><code>&lt;select id="authors"&gt;
    &lt;option value="1"&gt;Foo Bar&lt;/option&gt;
    &lt;option value="2" selected="selected"&gt;Bar Baz&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>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.</p>

<pre><code>$('#authors').change(function(){
    $('#authors option[selected=selected]').html('new content');
});
</code></pre>

<p>/edit: to clarify, the selector <code>'#authors option[selected=selected]'</code> works fine, it selects the correct <code>option</code> DOM element. But <code>.html('new content')</code> does nothing.</p>

<p>2nd edit: OK, this is embarrassing. 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 :-)</p>
