select ie issue

by Rich Costello

HTML

<select id="category" name="category">
    <option>-select-</option>
    <option value="MEN" id="menu1">MEN</option>
    <option value="WOMEN" id="menu2">WOMEN</option>
</select>
<br>
<select id="subcategory"></select>

JavaScript

var subcategories = [{
    category: "menu1",
    name: "Clothing"
}, {
    category: "menu1",
    name: "Accessories"
}, {
    category: "menu1",
    name: "Footwear"
}, {
    category: "menu2",
    name: "Watches"
}, {
    category: "menu2",
    name: "Sunglasses"
}, {
    category: "menu2",
    name: "Bags"
}];

$(document).ready(function () {
    $("#category").change(function () {
        var selectedCategory = $("option:selected").attr("id");
        $("#subcategory option").remove();
        $.each(subcategories, function () {
            if (this.category == selectedCategory) $("#subcategory").append(
            $("<option />")
                .val(this.name)
                .text(this.name));
        });
    });
});