Shuffle.js - 寻找一种使用 <select> 进行过滤的方法答案

【问题标题】：Shuffle.js - looking for a way to filter using <select>Shuffle.js - 寻找一种使用 <select> 进行过滤的方法
【发布时间】：2018-07-30 00:44:20
【问题描述】：

我一直在玩 Shuffle.js，非常喜欢它的流畅度。我正在寻找一种使用 SELECT 表单字段过滤结果的方法。

我的问题的第二部分：使用 SELECT 来归档是否是个好主意？我已经成功地弄清楚如何使用无序列表作为下拉列表进行过滤，但问题是所选术语在折叠时不会保持突出显示......这就是我正在查看 SELECT 的原因。感谢您提供任何反馈！

这是我的代码的样子（bootstrap 3 + wordpress）：

<ul class="nav nav-tabs">
            <li role="presentation" class="dropdown">
                <a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Filter Field Notes Category <span class="caret"></span></a>
                <ul class="dropdown-menu portfolio-sorting">
                    <li><a href="#" data-group="all" class="active">All</a></li>
                    <?php foreach($custom_terms as $custom_term) { ?>
                    <li><a href="#" data-group="<?php echo $custom_term->slug ?>"><?php echo $custom_term->name ?></a></li>
                    <?php }  ?>
                </ul>
            </li>
        </ul>

https://vestride.github.io/Shuffle/

----------更新------- -----

所以我今天已经搜索了几个小时并决定放弃尝试使用 Select 下拉菜单，并将注意力转移到尝试模拟它。这是一个很好的解决方法：http://jsfiddle.net/Starx/a6NJk/2/

这是一个使用 jQuery 和一些 JS 的非常简单而优雅的解决方案。只需替换每个列表项中的数据组变量，就可以很好地使用 Shuffle.js 进行过滤。希望这可以帮助任何想要做同样事情的人！

HTML

<ul>
    <li class="init">[SELECT]</li>
    <li data-value="value 1">Option 1</li>
    <li data-value="value 2">Option 2</li>
    <li data-value="value 3">Option 3</li>
</ul>

CSS

ul { 
  height: 30px;
  width: 150px;
  border: 1px #000 solid;
}
ul li { padding: 5px 10px; z-index: 2; }
ul li:not(.init) { float: left; width: 130px; display: none; background: #ddd; }
ul li:not(.init):hover, ul li.selected:not(.init) { background: #09f; }
li.init { cursor: pointer; }

a#submit { z-index: 1; }

$("ul").on("click", ".init", function() {
    $(this).closest("ul").children('li:not(.init)').toggle();
});

var allOptions = $("ul").children('li:not(.init)');
$("ul").on("click", "li:not(.init)", function() {
    allOptions.removeClass('selected');
    $(this).addClass('selected');
    $("ul").children('.init').html($(this).html());
    allOptions.toggle();
});


$("#submit").click(function() {
    alert("The selected Value is "+ $("ul").find(".selected").data("value"));
});

【问题讨论】：

标签： javascript select filter dropdown

【解决方案1】：

我找到了解决方法并编辑了我的原始帖子。希望对您有所帮助！

【讨论】：