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);

。
。
UPDATE：

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

您的问题是，您正在搜索其中包含大写字母的字符串（即＆＃39; HBO＆＃39; OR＆＃39; MBO＆＃39;）字符串中的所有字母均为小写字母（您有在ele.toLowerCase()条件中使用if。）
现在试试这个：

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;之前更改它，在上面显示的代码中，是此逻辑的最佳方式。
希望这能解决你的问题。

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>

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

2 个答案: