如何选择< select>的动态过滤器选项用jQuery？ [英] How to dynamic filter options of <select > with 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>

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

这篇关于如何选择< select>的动态过滤器选项用jQuery？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！