<select >
<option value="something">something</option>
<option value="something_else">something else</option>
</select>
<input type="text" >
因此，当用户输入某些内容时，只会显示与输入值匹配的选项。
如何使用jQuery动态过滤<select>的选项？
IT技术
javascript
jquery
dom
2021-03-10 18:41:26
6个回答
示例 HTML：
//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'));
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="hello">hello</option>
<option value="world">world</option>
<option value="lorem">lorem</option>
<option value="ipsum">ipsum</option>
<option value="lorem ipsum">lorem ipsum</option>
</select>
<input type="text">现场演示：http : //www.lessanvaezi.com/filter-select-list-options/
我不确定为什么您有多个具有相同值的选项，但这有效
$(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);
})
})
})<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select>
<option value="something1">something1</option>
<option value="something1">something1</option>
<option value="something2">something2</option>
<option value="something2">something2</option>
<option value="something2">something2</option>
<option value="something3">something3</option>
<option value="something3">something3</option>
<option value="something3">something3</option>
</select>
<input type="text" placeholder="something1">与所有其他略有不同，但我认为这是最简单的：
$(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 传递到此方法中。
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
<input id="search_input" placeholder="Type to filter">
<select id="theList" class="List" multiple="multiple">
或剃刀
@Html.ListBoxFor(g => g.SelectedItem, Model.items, new { @class = "List", @id = "theList" })
脚本
<script type="text/javascript">
$(document).ready(function () {
//copy options
var options = $('#theList option').clone();
//react on keyup in textbox
$('#search_input').keyup(function () {
var val = $(this).val();
$('#theList').empty();
//take only the options containing your filter text or all if empty
options.filter(function (idx, el) {
return val === '' || $(el).text().indexOf(val) >= 0;
}).appendTo('#theList');//add it to list
});
});
</script>