1

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

目前我已经尝试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/

4

4 回答 4

1

我认为完成您的想法的更简单方法是使用三个不同的下拉列表代替第二个下拉列表。然后，第一个下拉菜单可以根据其价值选择要显示的其中一个。

简单得多。

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

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

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

编辑：我叉了你的小提琴（也许编辑了你的原件？）。它有我建议的更改。

于 2013-01-24T23:09:09.307 回答
1

最后我使用了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');

    }

});
于 2013-01-25T17:56:45.410 回答
0

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

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

请记住，代码很少，只是为了向您展示如何将选项包装在跨度中并隐藏它们。如果您在第一次选择时恢复为“请选择”，则不会执行任何逻辑来显示所有选项。

于 2013-01-24T23:33:14.293 回答
0

您不能隐藏/删除单个选项，只能disabled对它们应用属性。它们将显示为灰色，但无法选择。

您可以以编程方式保留一个变量对象，该对象具有选择的默认配置的所有数据。然后，当您需要删除选项时，您可以但仍然有办法知道当您的所有条件都对齐时需要进入选择中的内容。

于 2013-01-24T23:02:19.453 回答