Javascript JQuery Mobile中的多选菜单过滤器

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

第一个选择菜单成功，但选择第二个菜单无效。我该怎么修？这是一个例子

HTML

---

你在尝试哪种浏览器？Chrome 49和FireFox 41

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

$('#select-area').change(function(){
    var value = $(this).val();
    var value2= $('#select-classification').val();
    $("#table_shop").find("li").hide()
    $("#table_shop").find("li."+value+" "+value2).show();
    //console.log("Option_1:"+value+","+value2);
});
$('#select-classification').change(function(){
    var value = $(this).val();
    var value2= $('#select-area').val();
    $("#table_shop").find("li").hide()
    $("#table_shop").find("li."+value2+" "+value).show();
    //console.log("Option_2:"+value2+" "+value);
});