[jQuery] Manipulating Select Options Doesn't work in IE7
Hi folks,
I'm brand new to jQuery and am quite pleased with the product so far,
however I've come across a difference in behaviour between Firefox 2
and IE7 when changing the styles of select element options that I
can't think of a workaround for.
I have the following bit of script that hides options in the
select#field-subcomponent element depending on what is selected in the
select#field-component element:
<script type="text/javascript" src="/trac/trunk/chrome/common/js/
wikitoolbar.js"></script><script type="text/javascript">
jQuery(document).ready(function($) {
/* hide options whose parent component is not selected */
$("#field-component").change(function() {
$("#field-subcomponent option").css("display",
"").filter(function(index) {
if($(this).text() == "" || $(this).attr("class") == $
("#field-component").val())
{
$(this).attr("selected", $(this).text() == 'cake');
return false;
}
else
{
$(this).attr("selected", false);
return true;
}
}).css("display", "none");
}).change();
});
</script>
This is the relevant HTML, for reference:
<td class="col1">
<select id="field-component"
name="field_component">
<option>component1</option><option
selected="selected">food</option>
</select>
</td>
<td class="col2">
<select id="field-subcomponent"
name="field_subcomponent">
<option></option>
<option class="component1">A subcomponent</
option><option class="component1">Another subcomponent</option><option
class="food" selected="selected">cake</option><option
class="food">cheese</option>
</select>
</td>
It works as expected in Firefox 2, but all the subcomponent options
are available all the time in IE7.
How can I get this to behave similarly across browsers?
Regards,
Mat