Jquery Mobile 1.4.5 filter listview with multiple select boxes

Question

Hello I am buillding a Jquery mobile 1.4.5 website based on jqm 1.4.5 and latest Jquery

I am trying to filter a list (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>

with a multiple popup select box list:

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

The js i am trying is:

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

However When I check boxes everything (both list and select boxes dissapear)

can someone help me or point me to the right direction?

thank you.

Answer 1

Give your list an ID so you can target only its listitems. By using the $("UL") selector you are hiding listitems in all ULs in the DOM, including the multiple select popup.

A multi-select box .val() returns an array of values, and null when nothing is selected. So first check for null and then show all listitems as no filter is active.

If .val() is not null then one or more filter items is/are selected. So go through each listitem, get its data-filtertext attribute and see if that attribute is in the array of selected filter items. Then show or hide each listitem accordingly:

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

Working DEMO