使用下拉列表 <select> 而不是单选按钮进行过滤

Question

我正在尝试使用 List.js

按 select 下拉列表进行过滤

我的示例在使用单选按钮时运行良好。但我想用 select 列表替换它们。

我试着改变这个 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()
        }
    });
});

但到目前为止这还行不通。感谢您对此的任何帮助。

这里有一个fiddle，原代码是：https://jsfiddle.net/6tht5pyk/

Answer 1

看到这个分支 fiddle：https://jsfiddle.net/7pkq23ty/

只需将选择器从 $("input[name=address]:selected").val(); 更改为 var values_address = $("select").val();

并且当然将事件绑定到 select 元素：$('select').change(updateList);

不用说，建议向您的 select 元素添加一个 ID 并在您的选择器中使用它，而不是使用 $('select') - 我用它来获得最少的更改您的代码。

使用下拉列表 <select> 而不是单选按钮进行过滤

Filter with dropdown <select> instead of radio buttons

javascript

jquery

list.js