使用选择过滤列表视图

时间:2013-09-27 12:29:52

标签: jquery-mobile

使用jquery mobile,可以使用select控件过滤listview吗?

这是我的例子:Fiddle

选择一个选项必须过滤listview。

2 个答案:

答案 0 :(得分:5)

您可以将过滤器设置为true data-filter="true",然后手动隐藏它。

#myContent .ui-listview-filter {
    display: none;
}

在更改选择时,只需将所选值放入文本字​​段并触发keyup事件。

$('#select-choice-1').change(function() {
    $('#myContent .ui-listview-filter input.ui-input-text').val($(this).val()).trigger('keyup');
});

试试这个http://jsfiddle.net/gdEKd/9/

答案 1 :(得分:2)

请参阅更新的演示:jsfiddle

<ul data-role="listview">
   <li data-filtertext="de" class="de"><a href=#>Audi</a></li>
   <li data-filtertext="de" class="de"><a href=#>BMW</a></li>
   <li data-filtertext="it" class="it"><a href=#>Ferrari</a></li>
   <li data-filtertext="it" class="it"><a href=#>Lamborghini</a></li>
   <li data-filtertext="it" class="it"><a href=#>Maserati</a></li>
</ul>

$('#select-choice-1').change(function(){
    var value = $('#select-choice-1').val();
    $("ul").find("li").hide()
    $("ul").find("li."+value).show();
  });