使用 JavaScript 过滤下拉菜单

Question

我有两个下拉菜单，我想根据菜单中的值过滤列表。我尝试通过网络搜索，但大多数答案都包括 jQuery。可以用纯 JavaScript 做到这一点吗？请不要只给出答案，我真的很想了解您是如何得出答案的。提前致谢。

HTML：

    xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
    var leftDisplay = document.getElementById('questions');
    var rightDisplay = document.getElementById('test');

    var res=xhr.responseText;

    var data=JSON.parse(res);

    var len=data.length;
    length=len;

    console.log(data);

    var lefthtml="<div class='row'>";
    lefthtml+="<div class='col-md-12'>";
    lefthtml+="<table id='qTable'>";
    lefthtml+="<thead style='background-color:#0d365e; color:white;'><tr><th>Check</th>";

    lefthtml+='<th width="1000">Question</th>';
lefthtml+='<th width="100">Type</th>';
   lefthtml+='<th width="100">Difficulty</th>';

    lefthtml+= "<center><input type='text' id='myInput' onkeyup='Search()' placeholder='Search..'>";
    lefthtml+="<select id= 'type'>";
    lefthtml+="<option value=''>type...</option>";
    lefthtml+="<option value='method'>method</option>";
    lefthtml+="<option value='for'>for</option>";
    lefthtml+="<option value='multiple'>multiple</option>";
    lefthtml+="<option value='while'>while</option>";
    lefthtml+="</select>"

    lefthtml+="<select id= 'difficulty'>";
    lefthtml+="<option value=''>difficulty...</option>";
    lefthtml+="<option value='easy'>easy</option>";
    lefthtml+="<option value='medium'>medium</option>";
    lefthtml+="<option value='hard'>hard</option>";
    lefthtml+="</select></center><br><br>"

    lefthtml+="</tr></thead>";
    lefthtml+="<tbody>";

    var righthtml ='<div>';
    righthtml+='<div>';

    righthtml+="<table class='table table-striped'>";
    righthtml+="<thead style='background-color:#0d365e; color:white;'><tr>";
    righthtml+='<th width="200">Check</th>';
    righthtml+='<th width="1000">Question</th>';
    righthtml+="<th style='width:25%;'>Points</th></tr>";
    righthtml+='</thead><tbody>';

    var pointsTotal;



    for(var i=0;i<len;i++){
        LeftArr.push(data[i]['id']);
        RightArr.push("test"+data[i]['id']);
        points.push("points"+data[i]['id']);

        lefthtml+="<tr><td>";

        lefthtml+='<input type="checkbox" name="questionlist" id="'+data[i]['id'];
        lefthtml+='" value="'+data[i]['id']+'"'+'></td>';

        lefthtml+='<td><br>'+data[i]['question']+'</td>';
        lefthtml+='<td><br>'+data[i]['type']+'</td>';


        lefthtml+='<td><br>'+data[i]['difficulty']+'</td>';

        lefthtml+='</tr>';


        righthtml+="<tr hidden id='"+"tr"+data[i]['id']+"'><td>";

        righthtml+='<input type="checkbox" name="testlist" id="'+"test"+ data[i]['id'];
        righthtml+='"value="'+data[i]['id']+'"'+'></td>';

        righthtml+='<td width="200px"><br>'+data[i]['question']+'</td>';


        righthtml+='<td><input type="text"';
        righthtml+='id="'+points[i]+'" name="point" onkeyup="findTotal()"';
        righthtml+='placeholder="Input Points" style="border:none;width:100%;"/></td>';

        righthtml+='</tr>';

    }


    lefthtml+="</tbody></table>";
    lefthtml+="</div></div>";
    righthtml+="</tbody></table>";
    righthtml+='</div></div>';
    righthtml+= '<center>total: <input type="text" name="total" onkeyup="findTotal()" id="total" readonly/> </center>';
    leftDisplay.innerHTML=lefthtml;
    rightDisplay.innerHTML=righthtml;

}
  }

Answer 1

简答：

是的，没有 jQuery 也是可能的，因为 jQuery 中的每个代码也可以用纯 JavaScript 编写。 jQuery 只不过是一组让开发人员的生活更轻松的函数。

如何解决：

因为你似乎并不关心 UI 设计，所以你可以很容易地解决这个问题。 为复选框添加一个监听器，每次更改时，您只需清空表格，搜索匹配的行并将它们再次粘贴到表格中。

如果你想让它更漂亮，你可以让一个类“显示”并在链接应该显示或不显示时删除/添加它。

Answer 2

当然，用 jQuery 完成的所有事情都可以用纯 Javascript 完成。 你只需要看看 jQuery 在幕后实际做了什么。

请详细说明您希望通过过滤实现什么？ 假设您要隐藏与输入框中输入的字符串不匹配的项目，因此这里有一个简单的伪代码，可以为您提供指导。

• 使用document.getElementById(#input).value从输入中获取字符串
• 遍历表的每一行并获取它们的.innerText()
• 检查来自搜索输入的值是否显示在带有rowsText.indexOf(searchVal) > -1 的行的文本中
• 如果未显示，则添加类以隐藏相应列表 - this.parentNode.classList.add('hidden')

但是这样的工作和搜索是昂贵的操作，所以不是优选的。