带有多个选择框的 Jquery Mobile 1.4.5 过滤器列表视图

Question

您好，我正在构建一个基于 jqm 1.4.5 和最新 Jquery 的 Jquery mobile 1.4.5 网站

我正在尝试过滤列表 (html)：

<div id="placeholder" class="ui-field-contain" data-role="fieldcontain">
 <ul data-inset="true" data-input="#filter" data-filter="true" data-role="listview">
 <li data-filtertext="1">
 <p>Some text</p>
 </li>
 </ul>
 </div>

带有多个弹出选择框列表：

    <div data-role="controlgroup" data-type="horizontal" data-enhanced="true" data-mini="true" >
<select name="select-1" id="select-1" multiple="multiple" data-native-menu="false">
    <option>text</option>
    <option value="1">1</option>
    <option value="2" >2</option>
    <option value="3" >3</option>
</select>
</div>

我正在尝试的js是：

    <script type="text/javascript">
$('#select-1').on('change', function (e){
var value = $('#select-1').val();
$("ul").find("li").hide()
$("ul").find("li."+value).show();
});
 </script>

但是，当我选中所有复选框时（列表框和选择框都消失了）

有人可以帮助我或指出正确的方向吗？

谢谢。

Answer 1

为您的列表指定一个 ID，这样您就可以仅定位其列表项。通过使用 $("UL") 选择器，您可以在 DOM 中的所有 UL 中隐藏列表项，包括多选弹出窗口。

多选框.val() 返回一个值数组，null 在未选择任何内容时返回。所以首先检查null，然后显示所有列表项，因为没有过滤器处于活动状态。

如果.val() 不是null，则选择一个或多个过滤器项目。因此，遍历每个 listitem，获取其 data-filtertext 属性并查看该属性是否在所选过滤器项的数组中。然后相应地显示或隐藏每个列表项：

$('#select-1').on('change', function (e){
    var filtvalue = $('#select-1').val();
    if (!filtvalue){
        //show all with no filter
        $("#theList").find("li").show();
    } else {
        $("#theList").find("li").each(function(idx){
            //get filter text
            var filtText = $(this).attr("data-filtertext");
            if ($.inArray(filtText, filtvalue) > -1){
                $(this).show();
            } else {
                $(this).hide();
            }
        });
    }
 });

工作DEMO