Test Case Boilerplate

Fork this way...

HTML

<select id='category' style='width: 200px'>
</select>

<select id='subcategory' style='width: 200px; display: none'>
</select>

JavaScript

var categories = [
    { id: '0', name: 'Consumables', subcategories: [
        { id: '-3', name: 'Item Enchantments (temp)' },
        { id: '0', name: 'Consumables' },
        { id: '1', name: 'Potions' },
        { id: '2', name: 'Elixirs' },
        { id: '3', name: 'Flasks' },
        { id: '4', name: 'Scrolls' },
        { id: '5', name: 'Food & Drinks' },
        { id: '6', name: 'Item Enchantments' },
        { id: '7', name: 'Bandages' },
        { id: '8', name: 'Other' },
    ]},
    { id: '1', name: 'Containers', subcategories: [
        { id: '0', name: 'Bags' },
        { id: '1', name: 'Soul Bags' },
        { id: '2', name: 'Herb Bags' },
        { id: '3', name: 'Enchanting Bags' },
        { id: '4', name: 'Engineering Bags' },
        { id: '5', name: 'Gem Bags' },
        { id: '6', name: 'Mining Bags' },
        { id: '7', name: 'Leatherworking Bags' },
        { id: '8', name: 'Inscription Bags' },
        { id: '9', name: 'Tackle Boxes' },
    ]},
    { id: '2', name: 'Weapons', subcategories: [
        { id: '0', name: 'One-Handed Axes' },
        { id: '1', name: 'Two-Handed Axes' },
        { id: '2', name: 'Bows' },
        { id: '3', name: 'Guns' },
        { id: '4', name: 'One-Handed Maces' },
        { id: '5', name: 'Two-Handed Maces' },
        { id: '6', name: 'Polearms' },
        { id: '7', name: 'One-Handed Swords' },
        { id: '8', name: 'Two-Handed Swords' },
        { id: '10', name: 'Staves' },
        { id: '13', name: 'Fist Weapons' },
        { id: '14', name: 'Miscellaneous' },
        { id: '15', name: 'Daggers' },
        { id: '16', name: 'Thrown' },
        { id: '18', name: 'Crossbows' },
        { id: '19', name: 'Wands' },
        { id: '20', name: 'Fishing Poles' },
    ]},
];

function filterByProperty(arr, prop, value) {
    return $.grep(arr, function(item) {
        return item[prop] == value
    });
}

// populates select list from array of items given as objects: { name: 'text', value: 'value'...