Select's option .hide()/.show() not working in FF

by Amy L

HTML

<script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
<select id="type">
    <option value="">Select one</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
</select>
<select id="item">
    <option value="">Select one above</option>
    <option value="a:1">A1</option>
    <option value="a:2">A2</option>
    <option value="a:3">A3</option>
    <option value="b:1">B1</option>
    <option value="b:2">B2</option>
    <option value="b:3">B3</option>
    <option value="c:1">C1</option>
    <option value="c:2">C2</option>
    <option value="c:3">C3</option>
</select>

CSS

select {
    display: block;
    width: 200px;
}

JavaScript

$('select#type').change(onSelectType);

function onSelectType(e) {
    var $this = $(this);
    var type = $this.val();
    selectType.call(this, type);
}

function selectType(type) {
    var $typeDropdown = $(this);
    var $itemDropdown = $('select#item');
    var $items = $itemDropdown.find('option');

    if (type) {
        var $selectedItems = $items.filter('[value^="' + type + ':"]');
        $items.hide();
        $selectedItems.show();
        var first = $selectedItems.first()[0];
        $itemDropdown.val(first.value);
    } else {
        $itemDropdown.val('');
    }
}