使用下拉 <select> 过滤而不是单选按钮答案

【问题标题】：Filter with dropdown <select> instead of radio buttons使用下拉 <select> 过滤而不是单选按钮
【发布时间】：2018-03-25 09:48:07
【问题描述】：

我正在尝试使用 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/

【问题讨论】：

标签： javascript jquery list.js

【解决方案1】：

看到这个分叉的小提琴：https://jsfiddle.net/7pkq23ty/

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

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

不言而喻，建议将 ID 添加到您的 select 元素并在您的选择器中使用它，而不是使用 $('select') - 我用它来对您的代码进行最少的更改。

【讨论】：