I have some jQuery code that selects an option in a select list. The first time it selects an item everything works, however the second pass through IE and FF do not clear the selected items. Chrome always works.
I have created a JSFiddle with a demo of what I am seeing. I have tried both $("testUpdate option:selected")
and $("testUpdate > option:selected")
as selectors, each work the first time only. I have tried changing the multiple tag to just multiple per this documentation.
Here is the HTML and relevant failing jQuery. I have been using jQuery 1.9.1, but on JSFiddle I see the same results with newer versions.
//HTML
<select id="testUpdate" name="testUpdateName" multiple="multiple" size="5">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select>
//jQuery that fails the 2nd pass
$("#testUpdate option:selected").each(function () {
//This is not executed
$(this).removeAttr('selected');
});
//Alternate selector to force all options to always be checked
//HTML is correct after this, but visually the list is not selected
//I would also prefer not to do this because the actual list will be hundreds of items
$("#testUpdate option").each(function () {
$(this).removeAttr('selected');
});