如何选择< select>的动态过滤器选项用jQuery？

本文介绍了如何选择&lt; select&gt;的动态过滤器选项用jQuery？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 <select > <option value="something">something</option> <option value="something_else">something else</option> </select> <input type="text" >

所以当用户输入内容时，只显示与输入值匹配的选项。

So that when user inputs something, only options with value matching the input will show.

推荐答案

示例HTML：

<select> <option value="hello">hello</option> <option value="world">world</option> </select> <input type="text">

jQuery扩展方法：

jQuery extension method:

<script> 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) ); } }); }); }); }; </script>

您可以这样使用：

<script> $(function() { $('select').filterByText($('input')); }); </script>

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