Question

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

目前我在我的选项中尝试使用dispay: none作为内联样式，但它并没有隐藏它。

我正在使用chrome，这需要适用于所有浏览器。任何人都可以解决一些问题，因为我似乎无法在谷歌上找到太多。

请在此处查看我的问题... 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/

Answer 1

我认为实现目标的更简单方法是使用三个不同的下拉列表代替第二个下拉列表。然后，第一个下拉菜单可以根据它的值来选择显示哪一个。

更简单。

通过这种更改，您可以简单地进行回调：

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

    $('.refined').removeClass('hidden').addClass('hidden');
    $('#'+refine).removeClass('hidden').removeAttr('disabled');
});

编辑：我forked your fiddle（也许可以编辑原作？）。它有我建议的变化。

Answer 2

最后我使用了jquery clone，这似乎可以解决问题。

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');

    }

});

Answer 3

您无法隐藏/删除单个选项，只会在其上应用属性disabled。它们会显得灰暗但不会被选中。

您可以逐步保留一个变量对象，其中包含select的默认配置的所有数据。然后，当您需要删除选项时，您仍然可以知道在所有条件对齐时需要进入选择的内容。

Answer 4

这不是最好的做事方式，最好动态建立您的选择。但是，如果必须这样做，请使用以下代码：

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

        var selected = $(this).val();
        $("#everything option").wrap("<span style='display:none' />");
        $("#everything option." + selected).unwrap();
        $("#everything").attr('disabled',false);

});

我在这里分叉：http://jsfiddle.net/AyX9Q/

请记住，代码很小，只是为了向您展示如何在跨度中包装选项并隐藏它们。如果您在第一个选择中恢复为“请选择”，它不会显示所有选项的逻辑。

如何隐藏html表单选择选项？

4 个答案: