如何隐藏html表单选择选项? [英] How to hide html form select option?

问题描述

我有一个非常简单的表单，当另一个选择字段对其进行优化时，我想隐藏选择选项.

I have a very simple form which I would like to hide select options when another select field refines it.

当前，我已尝试将dispay: none作为内联样式应用于选项，但它不会将其隐藏.

Currently I have tried dispay: none as an inline style on my options, but it does not hide it.

我正在使用chrome，这需要在所有浏览器上都可以使用.因为我似乎在Google上找不到很多东西，所以谁能给我一些启示.

I am using chrome and this needs to work across all browsers. Can anyone shed some light as I can't seem to find much on google.

请在此处实时查看我的问题... http://jsfiddle.net/3vPgY/5/

Please see my problem live here... http://jsfiddle.net/3vPgY/5/

这是我当前的代码...

And here my current code...

<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脚本...

And my jquery script that is suppost to filter the second dropdown...

$('#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');

    }

});

如您所见，我只想隐藏选项，而不是删除.这样，如果第一个下拉选项发生变化，我可以以某种方式将它们带回.

As you can see I only want to hide the options, not remove. This is so I can bring them back somehow if the first dropdown choice changes.

任何建议都是最有帮助的-也许可以解决.

Any advice would be most helpful - or maybe a work around.

谢谢

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

推荐答案

最后，我使用了 jquery克隆，似乎可以解决问题.

In the end I used jquery clone, which seemed to do the trick.

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

var everything = $('#everything').clone(true);

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

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

    if (refine != 0) {

        var everythingRefined = everything.clone(true).find('.default,.'+selectColour);

        $('#everything').removeAttr('disabled');
        $('#everything').empty().append(everythingRefined);

    } else {

        $('#everything').attr('disabled', 'disabled');

    }

});

这篇关于如何隐藏html表单选择选项?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！