关于javascript：如何使用jQuery动态过滤<select>选项？

How to dynamic filter options of <select > with jQuery?

1
2
3
4
5

<select >
<option value="something">something</option>
<option value="something_else">something else</option>
</select>
<input type="text">

因此，当用户输入某些内容时，只会显示与输入值匹配的选项。

示例HTML：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

//jQuery extension method:
jQuery.fn.filterByText = function(textbox) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({
value: $(this).val(),
text: $(this).text()
});
});
$(select).data('options', options);

$(textbox).bind('change keyup', function() {
var options = $(select).empty().data('options');
var search = $.trim($(this).val());
var regex = new RegExp(search,"gi");

$.each(options, function(i) {
var option = options[i];
if (option.text.match(regex) !== null) {
$(select).append(
$('<option>').text(option.text).val(option.value)
);
}
});
});
});
};

// You could use it like this:

$(function() {
$('select').filterByText($('input'));
});

1
2
3
4
5
6
7
8
9

现场演示：
http://www.lessanvaezi.com/filter-select-list-options/

相关讨论

我不确定为什么您会有多个具有相同值的选项，但这可以工作

1
2
3
4
5
6
7
8
9
10
11
12
13

$(document).ready(function() {
$('input').change(function() {
var filter = $(this).val();
$('option').each(function() {
if ($(this).val() == filter) {
$(this).show();
} else {
$(this).hide();
}
$('select').val(filter);
})
})
})

1
2
3
4
5
6
7
8
9
10
11
12

相关讨论

与其他所有略有不同，但我认为这是最简单的：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$(document).ready(function(){

var $this, i, filter,
$input = $('#my_other_id'),
$options = $('#my_id').find('option');

$input.keyup(function(){
filter = $(this).val();
i = 1;
$options.each(function(){
$this = $(this);
$this.removeAttr('selected');
if ($this.text().indexOf(filter) != -1) {
$this.show();
if(i == 1){
$this.attr('selected', 'selected');
}
i++;
} else {
$this.hide();
}
});
});

});

相关讨论

比大多数其他解决方案简单得多的代码。查找文本(不区分大小写)，然后使用CSS隐藏/显示内容。比存储数据副本要好得多。

将选择框的ID以及包含过滤器的输入的ID传递给此方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

function FilterSelectList(selectListId, filterId)
{
var filter = $("#" + filterId).val();
filter = filter.toUpperCase();

var options = $("#" + selectListId +" option");
for (var i = 0; i < options.length; i++)
{
if (options[i].text.toUpperCase().indexOf(filter) < 0)
$(options[i]).css("display","none");
else
$(options[i]).css("display","block");
}
};

这是一个简单的解决方案，其中您可以克隆列表选项，并将其保留在对象中以供以后恢复。脚本清除列表并仅添加包含输入文本的选项。这也应该可以跨浏览器使用。我从这篇文章中得到了一些帮助：https://stackoverflow.com/a/5748709/542141

HTML

1 2	<input id="search_input" placeholder="Type to filter"> <select id="theList" class="List" multiple="multiple">

或剃刀

1	@Html.ListBoxFor(g => g.SelectedItem, Model.items, new { @class ="List", @id ="theList" })

脚本

1
2
3
4
5
6
7
8
9
10
11
12
13
14

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

相关讨论

我对此有类似的问题，因此我更改了公认的答案，以制作该功能的更通用版本。我以为我会留在这里。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

更新Lessan \\的答案，以同时保留选项的属性。

这是我第一次对Stack Overflow进行回答，因此不确定是应该编辑他的答案还是创建自己的答案。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47

jQuery.fn.allAttr = function() {
var a, aLength, attributes, map;
if (!this[0]) return null;
if (arguments.length === 0) {
map = {};
attributes = this[0].attributes;
aLength = attributes.length;
for (a = 0; a < aLength; a++) {
map[attributes[a].name.toLowerCase()] = attributes[a].value;
}
return map;
} else {
for (var propin arguments[0]) {
$(this[0]).attr(prop, arguments[0][prop]);
}
return this[0];
}
};

jQuery.fn.filterByText = function(textbox) {
return this.each(function() {
var select = this;
var options = [];
$(select).find('option').each(function() {
options.push({ value: $(this).val(),
text: $(this).text(),
allAttr: $(this).allAttr() });
});
$(select).data('options', options);

$(textbox).bind('change keyup', function() {
var search = $.trim($(this).val());
var regex = new RegExp(search,"gi");

$.each($(select).empty().data('options'), function(i, option) {
if (option.text.match(regex) !== null) {
$(select).append(
$('<option>').text(option.text)
.val(option.value)
.allAttr(option.allAttr)
);
}
});
});
});
};

相关讨论

使用亚伦的答案，这可能是简短的

您可以使用select2插件来创建这样的过滤器。有了这样的编码工作，就可以避免。您可以从https://select2.github.io/

获取插件

此插件非常易于应用，甚至可以轻松完成高级工作。：)