本文介绍了如何选择< select>的动态过滤器选项用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/
更多推荐
如何选择< select>的动态过滤器选项用jQuery?
发布评论