下拉過濾 <select>而不是單選按鈕

Question

我正在嘗試使用List.js通過選擇下拉列表進行過濾

我的示例在單選按鈕上正常工作。 但我想用一個選擇列表代替它們。

我嘗試更改此html

<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中將所有checked實例更改為selected

    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();更改選擇器即可$("input[name=address]:selected").val(); 到var values_address = $("select").val();

當然，將事件綁定到select元素： $('select').change(updateList);

不用說，建議將ID添加到select元素中並在選擇器中使用它，而不要使用$('select') -我用它來對代碼進行最少的更改。