帶有多個選擇框的jQuery Mobile 1.4.5過濾器列表視圖

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>

我正在嘗試的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則選擇一個或多個過濾器項。 因此，遍歷每個列表項，獲取其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();
            }
        });
    }
 });

工作演示