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;

}
  }

Side-note: do you know about template literals that will obviate the need for all those lefthtml+=? — msanford
– msanford, Commented Mar 27, 2018 at 14:24
Sorry, I'm new to JavaScript. Thanks, I'll check it out, definitely clean up the code nice — newbie
– newbie, Commented Mar 27, 2018 at 14:33

Angel Politis · Accepted Answer · 2018-03-27 14:32:57Z

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.

edited Mar 27, 2018 at 14:32

Angel Politis

11.4k15 gold badges51 silver badges67 bronze badges

answered Mar 27, 2018 at 14:30

MauriceNino

6,8851 gold badge32 silver badges76 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

marc_s · Accepted Answer · 2019-07-29 15:17:27Z

1

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.

edited Jul 29, 2019 at 15:17

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Mar 27, 2018 at 14:31

Gesha

9215 silver badges7 bronze badges

1 Comment

Gesha Over a year ago

Glad to hear that.

Collectives™ on Stack Overflow

Filtering drop-down menu using JavaScript

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related