在HTML表格中搜索-组合多个值（下拉列表，文本字段..）

Question

是否可以在表单中添加下拉菜单，并且该函数将组合下拉菜单中的所选值和要搜索的文本字段的值？

该代码适用于HTML表格，以便访问者可以在表格中进行搜索。

谢谢！ :)

<script type="text/javascript">

function search (phrase, _id){
    var words = phrase.value.toLowerCase().split(" ");
    var table = document.getElementById(_id);
    var ele;
    for (var r = 0; r < table.rows.length; r++){
        ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
        var displayStyle = 'none';
        for (var i = 0; i < words.length; i++) {
            if (ele.toLowerCase().indexOf(words[i])>=0)
                displayStyle = '';
            else {
                displayStyle = 'none';
                break;
            }
        }
        table.rows[r].style.display = displayStyle;
    }
}

</script>

<form>

<b>Words:</b>

<input name="filter" onkeyup="search(this, 'my-table', 1)" type="text">

</form>

Answer 1

在var words = phrase.value.toLowerCase().split(" ");
尝试这个：

var dd = document.getElementById("your_dropdown_id");
words.push(dd.options[dd.selectedIndex].text);

。
。
更新：

上面显示的是您原始问题的答案。 现在您有一些不同的问题。

您的问题是，您正在搜索一个带有大写字母的字符串（即“ HBO”或“ MBO”），并且该字符串中的所有字母都为小写ele.toLowerCase() if在if条件中使用了ele.toLowerCase() 。
现在尝试这个：

var displayStyle = 'block';
for (var i = 0; i < words.length; i++)
    if (ele.toLowerCase().indexOf(words[i].toLowerCase()) == -1) {
        displayStyle = 'none';
        break;
    }

将displayStyle初始化为'block' ，并在break;之前进行更改break; 总体而言，上面显示的代码是实现此逻辑的最佳方法。
希望这能解决您的问题。

Answer 2

也许我做错了..

function search (phrase, _id){
    var words = phrase.value.toLowerCase().split(" ");

    var dd = document.getElementById("education");
    words.push(dd.options[dd.selectedIndex].text);

    var table = document.getElementById(_id);
    var ele;
    for (var r = 0; r < table.rows.length; r++){
        ele = table.rows[r].innerHTML.replace(/<[^>]+>/g,"");
        var displayStyle = 'none';
        for (var i = 0; i < words.length; i++) {
            if (ele.toLowerCase().indexOf(words[i])>=0)
                displayStyle = '';
            else {
                displayStyle = 'none';
                break;
            }
        }
        table.rows[r].style.display = displayStyle;
    }
}

</script>

<form>

<b>Words:</b>

<input name="filter" onkeyup="search(this, 'my-table', 1)" type="text"><br>

<b>Education:</b>

<select id="education">
   <option value="">Select</option>
   <option value="MBO">MBO</option>
   <option value="HBO">HBO</option>
   <option value="University">University</option>
</select>

</form>