У меня есть очень простая форма, в которой я хотел бы скрыть параметры выбора, когда другое поле выбора уточняет его.

В настоящее время я пыталсяdispay: none как встроенный стиль на моих вариантах, но это не скрывает это.

Я использую Chrome, и это должно работать во всех браузерах. Может кто-нибудь пролить свет, как я не могу найти много на Google.

Пожалуйста, посмотрите мою проблему в прямом эфире здесь ...http://jsfiddle.net/3vPgY/5/

И вот мой текущий код ...

<form>
    <select id="refine">
        <option class="default" value="0">Please refine...</option>
        <option value="green">Green</option>
        <option value="blue">Blue</option>
        <option value="red">Red</option>
    </select>
    <select id="everything" disabled="disabled">
        <option class="default" value="">Please select</option>
        <option class="green" value="green-sel">Show only if Green selected</option>
        <option class="green" value="green-sel">Show only if Green selected</option>
        <option class="green" value="green-sel">Show only if Green selected</option>
        <option class="blue" value="blue-sel">Show only if Blue selected</option>
        <option class="blue" value="blue-sel">Show only if Blue selected</option>
        <option class="blue" value="blue-sel">Show only if Blue selected</option>
        <option class="red" value="red-sel">Show only if Red selected</option>
        <option class="red" value="red-sel">Show only if Red selected</option>
        <option class="red" value="red-sel">Show only if Red selected</option>
    </select>
</form>

И мой скрипт jquery, который должен фильтровать второй выпадающий список ...

$('#refine').change(function () {

    var refine = $('option:selected', this).val().replace(/ /g, "-");

    if (refine != 0) {

        $('#everything').removeAttr('disabled');
        $('#everything option:not(.default)').css('display', 'none');
        $('#everything .' + refine).css('display', 'block');

    } else {

        $('#everything').attr('disabled', 'disabled');
        $('#everything option:not(.default)').css('display', 'none');

    }

});

Как видите, я хочу только скрыть опции, а не удалять. Это так, чтобы я мог как-то вернуть их, если первый вариант выпадающего меню изменится.

Любой совет будет наиболее полезным - или, возможно, обходной путь.

Спасибо

http://jsfiddle.net/3vPgY/5/