如何动态过滤<select>的选项用jQuery? [英] How to dynamic filter options of <select > with jQuery?

问题描述

<预><代码><选择><option value="something">something</option><option value="something_else">别的东西</option></选择><input type="text" >

这样当用户输入内容时，只有与输入值匹配的选项才会显示.

解决方案

HTML 示例:

//jQuery 扩展方法:jQuery.fn.filterByText = 函数(文本框){返回 this.each(function() {var select = this;var 选项 = [];$(select).find('option').each(function() {options.push({值:$(this).val(),文本:$(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 选项 = 选项[i];if (option.text.match(regex) !== null) {$(选择).追加($('').text(option.text).val(option.value));}});});});};//你可以这样使用它:$(函数(){$('select').filterByText($('input'));});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><选择><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></选择><input type="text">

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

<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.

解决方案

Example 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">

Live demo here: http://www.lessanvaezi.com/filter-select-list-options/

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