Question

你好我是基于jqm 1.4.5和最新的Jquery

来建立一个Jquery移动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>

我正在尝试的是：

    <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属性，并查看该属性是否在所选过滤器项的数组中。然后相应地显示或隐藏每个listitem：

$('#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

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

1 个答案: