Filtering drop-down menu using JavaScript

Question

I have two drop-down menus, and I would like to filter the list based on the values from the menu. I tried searching through the web, but most of the answers included jQuery. Is it possible to do this with pure JavaScript? Please don't just give the answer, I really want to learn how you came up with the answer. Thanks in advance.

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

Short answer:

yes, it is possible without jQuery, because every code in jQuery can also be written in pure JavaScript. jQuery is nothing than a set of functions which make the life of a developer easier.

How to solve it:

Because you don't seem to care about UI design, you can solve this very easy. Add a listener to the checkboxes and on every change, you just empty the table, search for the matching lines and paste them in the table again.

If you want to make this more beautiful you can make a class "show" and remove/add it when the link should be shown or not.

Answer 2

Everything that is done with jQuery could be done with pure Javascript of course. You just need to look what jQuery actually do behind the scenes.

Please explain more what you want to achieve by filtering ? Lets assume that you want to hide items that did not match the string entered in input box, so here is simple pseudo code that can be a guide for you.

• get string from input with document.getElementById(#input).value
• loops through each rows of table and get their .innerText()
• check if value from search input is presented in the text of rows with rowsText.indexOf(searchVal) > -1
• if it is not presented then add class to hide corresponding list - this.parentNode.classList.add('hidden')

However working and searching like that is expensive operation, so it is not preferrable.