Javascript Shuffle.js-寻找使用<；选择>；

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

我问题的第二部分：使用SELECT-to-filer是一个好主意吗？我已经成功地找到了如何使用无序列表作为下拉列表进行过滤的方法，但问题是所选术语在折叠时不会突出显示。。。这就是为什么我在选择。我感谢任何反馈

下面是我的代码的样子（Bootstrap3+wordpress）：

JS

---

我找到了一个解决办法，并编辑了我的原始帖子。希望有帮助

<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>

<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>

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"));
});