JQuery Mobile中的多选菜单过滤器

时间:2016-03-30 02:56:46

标签: javascript jquery html

我想使用两个“选择菜单”来过滤列表。

首先选择菜单成功,但选择第二个菜单不起作用。我该如何解决?这是demo

HTML

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/SecondaryBackground"
tools:context="com.example.filippo.xxx.MainActivity"
>


<include android:id="@+id/app_bar" layout="@layout/toolbar"/>


<fragment
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:map="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/map"
    android:layout_below="@+id/app_bar"
android:name="com.google.android.gms.maps.SupportMapFragment"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context="com.example.filippo.xxx.homemap"
/>

</RelativeLayout>

的JavaScript

<div data-role="main" class="ui-content">
<!-- Select Menu -->
<fieldset data-role="controlgroup" data-type="horizontal">
<!-- First Select Menu -->
    <select name="select-area" id="select-area" data-native-menu="false">
        <option value="" data-placeholder="true">Area</option>
        <option value="north">North</option>
        <option value="central">Central</option>
        <option value="south">South</option>
    </select>
<!-- Second Select Menu -->
    <select name="select-classification" id="select-classification" data-native-menu="false">
        <option value="" data-placeholder="true">Classify</option>
        <option value="consum">Shopping</option>
        <option value="branch">Branch&nbsp;Info</option>
        <option value="atm">ATM&nbsp;Info</option>
    </select>
</fieldset>
<!-- List of Data -->
<div data-role="fieldcontain">    
<ul data-role="listview" id="table_shop">
    <li class="north consum "><a href=#>Taipei&nbsp;101</a></li>
    <li class="north branch"><a href=#>Taipei&nbsp;Branch</a></li>
    <li class="central consum"><a href=#>Tiger&nbsp;City</a></li>
    <li class="central atm"><a href=#>Calligraphy&nbsp;Greenway&nbsp;ATM</a></li>
    <li class="south branch"><a href=#>Kaohsuing&nbsp;Branch</a></li>
    <li class="south atm"><a href=#>FengShan&nbsp;ATM</a></li>
</ul>
</div>
</div>

0 个答案:

没有答案