jQuery选择值组合答案

【问题标题】：jQuery select value combinationjQuery选择值组合
【发布时间】：2013-04-19 15:18:40
【问题描述】：

我目前正在做一个学校项目，需要一些关于我的 jQuery 脚本的帮助。我想用

我有以下内容，它可以工作

<select>
    <option value="all">All</option>
    <option value="cars">Cars</option
</select>

<div id="all" class="ranking-item">All rankings</div>
<div id="cars" class="ranking-item">Cars rankings</div>

使用 jQuery

$(document).ready(function() {

    $(".ranking-item").not(":first").hide(); //prevent seeing nothing

    $("select").change(function() {

    $('.ranking-item').hide();
    var targetId = $(this).val();
    $('#'+targetId).show();
    })

});

但我想要多 1 个过滤器，像这样

<select>
    <option value="all">All</option>
    <option value="cars">Cars</option
</select>

<select>
    <option value="lap1">Lap 1</option>
    <option value="lap2">Lap 2</option
</select>

预期的输出是

<div id="all lap1" class="ranking-item">All rankings</div>
<div id="all lap2" class="ranking-item">All rankings</div>
<div id="cars lap1" class="ranking-item">Cars rankings</div>
<div id="cars lap2" class="ranking-item">Cars rankings</div>

但这不起作用...

任何猜测我怎样才能让它工作？感谢转发

【问题讨论】：

标签： jquery select filter option

【解决方案1】：

您不能有多个 ID。 ID 是唯一的。改用类。

    <select>
        <option value="all">All</option>
        <option value="cars">Cars</option>
    </select>

    <select>
        <option value="lap1">Lap 1</option>
        <option value="lap2">Lap 2</option>
    </select>

    <div class="ranking-item all lap1">All rankings lap1</div>
    <div class="ranking-item all lap2">All rankings lap2</div>
    <div class="ranking-item cars lap1">Cars rankings lap1</div>
    <div class="ranking-item cars lap2">Cars rankings lap2</div>

    <script src="http://code.jquery.com/jquery-2.0.0.min.js"></script>
    <script>

        $(document).ready(function() {

            $(".ranking-item").not(":first").hide(); //prevent seeing nothing

            $("select").change(function() {

                $('.ranking-item').hide();
                var targetClass = $(this).val();
                $('.'+targetClass).show();

            })

        });

    </script>

还要想想它背后的逻辑。如果选择用作过滤器，您应该使用所有过滤器过滤所有数据列表（或者可能重置其他过滤器）：

例如：

如果选择了 all，我们将得到 all 的两个元素如果选择了 lap，我们会得到 lap 的两个元素（即使仍然选择了所有元素）

组合过滤器，以便如果选择了 all 和 lap1，它会输出正确的列表。

【讨论】：