javascript - 如何根据文本框值过滤列表框的内容

Question

我有一个 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 年的值填充同一列表框。

谁能告诉我该怎么做？

Answer 1

也许您需要两个列表框(选择标签)，其中一个作为主要数据源隐藏，其中一个对用户可见，您可以使用以下代码并添加 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);
        }
    }
};