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设计，所以您可以轻松解决这个问题。在复选框中添加一个监听器，每次更改时，只需清空表格，搜索匹配的行并再次将它们粘贴到表格中。

如果你想让这个更漂亮，你可以上课＃34; show＆＃34;并在显示或不显示链接时删除/添加。

Answer 2

使用jQuery完成的所有操作都可以使用纯Javascript ofcourse完成。你只需要看看jQuery在幕后实际做了什么。

请通过过滤了解更多您想要实现的内容？让我们假设您要隐藏与输入框中输入的字符串不匹配的项目，因此这里有简单的伪代码，可以作为您的指南。

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

然而，像这样的工作和搜索是昂贵的操作，所以它是不可预见的。

使用JavaScript过滤下拉菜单

2 个答案: