在HTML表中搜索-组合多个值(下拉列表、文本字段）

Search in HTML-table - Combine multiple values (dropdown, textfield ..)

本文关键字：下拉列表 文本 字段 HTML 搜索 组合      更新时间：2023-09-26

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

代码应用于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>

也许我做错了什么。。

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>

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

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


。
更新：

上面显示的是原始问题的答案。现在你遇到了一些不同的问题。

您的问题是，您正在搜索一个包含大写字母的字符串（即"HBO"或"MBO"），其中所有字母都是小写字母（您在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;之前将其更改，在上面显示的整个代码中，这是该逻辑的最佳方式
希望这能解决你的问题。

相关文章：