如何根据文本框值筛选列表框的内容

how to filter the contents of a listbox based on a text box value

本文关键字:列表 筛选 何根 文本      更新时间:2023-09-26

我有一个HTML表单,其中包含以下元素

1)一个列表框(包含一个文件名列表)

  s1.txt2013
  s2.txt2013
  s3.txt2012
  s4.txt2012

2)文本框(用户输入模式,例如2013)

3)按钮

默认列表框中包含上述4个文件名。

当用户在文本框中输入一个文本(例如在文本框中输入2013)并按下按钮时,则根据文本框

中提到的文本过滤列表框内容

所以在这种情况下,点击按钮后,列表框应该只包含两个值(即只出现2013的值)。

s1.txt2013
s2.txt2013

我怎么能做到这一点。我是这样做的……我正在使用一个javascript函数,它将在javascript数组中获取列表框的所有选项值。现在我不能在数组中搜索2013,也不能用在in中包含2013的值填充相同的列表框。

谁能告诉我怎么做?

也许你需要两个列表框(选择标签),其中一个隐藏为主数据源,其中一个对用户可见,你可以使用以下代码并添加onclick="buttonClicked()"到你的按钮属性。

function buttonClicked () {
    var textbox = document.getElementById('YOUR TEXTBOX ID'),
        listbox = document.getElementById('YOUR SELECT ID'),
        mainListbox = document.getElementById('YOUR MAIN SELECT ID');
    listbox.innerHTML = '';
    for (var childIndex = 0; childIndex < mainListbox.children.length; childIndex++) {
        var child = mainListbox.children[childIndex];
        if (child.innerHTML.search(textbox.value) != -1) {
            option = document.createElement('option');
            option.innerHTML = child.innerHTML;
            listbox.appendChild(option);
        }
    }
};

你试过使用。test吗?对我来说,这将是一个很好的方法。

http://www.w3schools.com/jsref/jsref_regexp_test.asp

<script>
var str="Hello world!";
//look for "Hello"
var patt=/Hello/g;
var result=patt.test(str);
document.write("Returned value: " + result); 
//look for "W3Schools"
patt=/W3Schools/g;
result=patt.test(str);
document.write("<br>Returned value: " + result);
</script>