Question

我跟随这里看到的示例小提琴https://jsfiddle.net/cqDES/

并尝试修改它以满足我的需求https://jsfiddle.net/rLe6q9vg/3/

我无法正确复制代码，但是当我点击选择按钮时，我看不到正确的div显示内容为“Activity”或“Friend”

不明白我错过了什么？

JS

$(function() {
    $('select').change(function() {
        var val = $(this).val();
        if (val) {
            $('div:not(#ActivityBadge' + val + ')').slideUp();
            $('#ActivityBadge' + val).slideDown();
        } else {
            $('div').slideDown();
        }
    });

});

HTML

            <select name="huge" class="btn-group select select-block mbl select-multiple" id="options">
                    <option value="0">Click to filter notifications</option>
                    <option value="1">Activity Notifications</option>
                    <option value="2">Friends Notifications</option>
                </select>

            <div id="ActivityBadge" class="containerB">badge</div>
            <div id="ActivityFriends" class="containerF">friends</div>

Answer 1

选择值必须与div的id匹配。 div必须有内容。 https://jsfiddle.net/83y0t0rm/

<select name="huge" class="btn-group select select-block mbl select-multiple" id="options">
    <option value="">Click to filter notifications</option>
    <option value="ActivityBadge">kudosoo Notifications</option>
    <option value="ActivityFriends">Friends Notifications</option>
</select>
<div id="ActivityBadge" class="containerB" ACTIVITY>badge</div>
<div id="ActivityFriends" class="containerF" FRIEND 1>friends</div>

$(function() {
    $('select').change(function() {
        var val = $(this).val();
        if (val) {
            $('div:not(#' + val + ')').slideUp();
            $('#' + val).slideDown();
        } else {
            $('div').slideDown();
        }
    });
});

无法使选择框过滤器使用javascript工作

1 个答案: