我正在使用带有 HTML 的 JSP。
在 HTML 中,我有一个文本框和一个多选元素。我想当用户在文本框中键入内容时过滤选择列表中的选项。
我在此 stackoveflow 页面上找到了有用的 JQuery 代码: How to dynamic filter options of <select > with jQuery?
代码如下:
<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>
问题在于,此代码仅在 select 元素中的选项被硬编码时才有效。 我所说的硬编码是指这样:
<option value="something">something</option>
<option value="something">something</option>
但是,就我而言,我有一个大约 6000 个值的列表,我使用 java 代码将它们添加到选择列表中。这是 Java 代码:
<%
ArrayList<String> allGenes= new ArrayList<String>();
allGenes.addAll(tree.getAllGenes());
%>
<%
for(int i=0; i<allGenes.size(); i++)
{ %>
var gene=document.createElement('option');
var str="<%=allGenes.get(i)%>";
gene.text= str;
try
{
document.getElementById("inputSet1").add(gene,null);
}
catch(ex){
document.getElementById("inputSet1").add(gene);
}
<%}%>
过滤选择列表中元素的 JQuery 代码不会过滤我使用 java 代码添加的这些值。相反,它会删除所有这些值,因为这些值不是硬编码的。
这是我的文本框和选择元素:
<input type="text" name="text" id="text" style="position: absolute; top: 50px; left: 55px; width: 200px; height: 22px; right: 4px">
<select id="inputSet1" multiple="multiple" Style="position: absolute; top: 93px; left: 55px; width: 200px; height: 200px; right: 4px; overflow-y: scroll">
<option value="1">1</option> </select>
任何人都可以帮助我让我的代码过滤我添加的值。谢谢。
最佳答案
看起来快速修复是在填充选项列表后调用filterByText。
<%
ArrayList<String> allGenes= new ArrayList<String>();
allGenes.addAll(tree.getAllGenes());
%>
<%
for(int i=0; i<allGenes.size(); i++)
{ %>
var gene=document.createElement('option');
var str="<%=allGenes.get(i)%>";
gene.text= str;
try
{
document.getElementById("inputSet1").add(gene,null);
}
catch(ex){
document.getElementById("inputSet1").add(gene);
}
<%}%>
$('inputSet1').filterByText($('input'));
从长远来看,我建议你研究一下ajax。您可能最好传递数据(以 JSON 等格式),而不是编写生成 javascript 代码的 java 代码。
关于javascript - 当用户在文本框中键入内容时,过滤由 java 代码添加的 HTML 选择元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13979675/