javascript - DropDown Menu Filtering for Large Categories -

i'm working on website job , been tasked creating dropdown menu filters webpage of table rows based on categories (listed classes). have working using jquery following guide, html , jquery knowledge beginner-ish.

here jquery function sample , want figure out how make loop change function 1000+ repetitive lines small 1 page thing that's easy edit.

function filtercontent() {     var user = document.getelementbyid("mydropdown").value;       if(user=="all") {         jquery(".cat1,.cat2,.cat3,.")             .css("display","block");     } else if (user=="cat1") {             jquery(".cat2")                         .css("display","none");             jquery(".cat3")                         .css("display","none");                          jquery(".cat1")                         .css("display","block"); else if (user=="cat2") {             jquery(".cat2")                         .css("display","none");             jquery(".cat3")                         .css("display","none");                          jquery(".cat2")                         .css("display","block"); else if (user=="cat3") {             jquery(".cat1")                         .css("display","none");             jquery(".cat3")                         .css("display","none");                          jquery(".cat3")                         .css("display","block"); }  } 

my html code looks like:

<select id="mydropdown" onchange="filtercontent();"> <option value="all">all research areas</option> <option value="cat1">attribute 1</option> <option value="cat2">attribute 2</option> <option value="cat3">attribute 3</option> </select> <table> <tr class"cat1 cat 2">this row has feature cat 1 , 2</tr> <tr class"cat1 cat 3">this row has feature cat 1 , 3</tr> <tr class"cat2">this row has feature cat2</tr> <tr class"cat1">this row has feature cat1</tr> </table> </html>