Change content of <option> elements
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. 开发者_如何学GoBut .html('new content')
does nothing.
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 :-)
Try:
$('#authors').find('option:selected').html('new content');
example: http://www.jsfiddle.net/4yUqL/38/
$("#authors option:selected").html('new content');
精彩评论