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

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