與下拉<select>而不是單選按鈕篩選

Question

我試圖用List.js

我的例子選擇下拉篩選工作正常開關按鈕。但我想用選擇列表替換它們。

我試圖改變這個網站

<label> 
    <input class="filter" type="radio" value="Blvd" name="address" id="address-all" /> Boulevard 
</label> 
<label> 
    <input class="filter" type="radio" value="Blvd" name="address" id="address-boulevard" /> Boulevard 
</label> 

這個

<select> 
    <option class="filter-all" type="radio" value="all" name="address" id="address-all" selected> 
    All 
    </option> 
    <option class="filter" type="radio" value="Blvd" name="address" id="address-boulevard">Boulevard 
    </option> 
</select> 

和改到在.js文件選擇的所有實例檢查

var options = { 
    valueNames: [ 
     'name', 
     'address', 
    ], 
}; 
var userList = new List('users', options); 

function resetList() { 
    userList.search(); 
    userList.filter(); 
    userList.update(); 
    $(".filter-all").prop('selected', true); 
    $('.filter').prop('selected', false); 
    $('.search').val(''); 
}; 

function updateList() { 
    var values_address = $("input[name=address]:selected").val(); 
    console.log(values_address); 
    userList.filter(function(item) { 
     var addressFilter = false; 
     if (values_address == "all") { 
      addressFilter = true; 
     } else { 
      addressFilter = item.values().address.indexOf(values_address) >= 0; 
     } 
     return addressFilter 
    }); 
    userList.update(); 
} 
$(function() { 
    $('input[name=address]').change(updateList); 
    userList.on('updated', function(list) { 
     if (list.matchingItems.length > 0) { 
      $('.no-result').hide() 
     } else { 
      $('.no-result').show() 
     } 
    }); 
}); 

但這樣遠不是這樣加工。感謝您的幫助。

這裏是與原來碼的小提琴：https://jsfiddle.net/6tht5pyk/

Answer 1

看這個叉形小提琴：https://jsfiddle.net/7pkq23ty/

從$("input[name=address]:selected").val();選擇器只需改變爲var values_address = $("select").val();

和關閉過程的事件綁定到select元件：$('select').change(updateList);

不言而喻，建議您爲您的012添加一個ID元素並在您的選擇器中使用它，而不是使用$('select') - 我用它對代碼進行最少量的更改。