javascript - Select Options to trigger table appearance -
i have table 2 columns. have select option dropdown box. have 6 different values table row correspond color, green being good, red being bad, , on. want accomplish when user loads page values present. when user selects value dropdown box, value selected disappears.
my javascript
function select_mem() { if ($("select[name='status-type']").val() == "all") { $('.num-good').show(); $('.num-not').show(); $('.num-not-working').show(); $('.num-bad').show(); $('.num-blue').show(); } if ($("select[name='status-type']").val() == "good") { $('.num-good').show(); $('.num-not').hide(); $('.num-not-working').hide(); $('.num-bad').hide(); $('.num-blue').hide(); } if ($("select[name='status-type']").val() == "bad") { $('.num-good').hide(); $('.num-not').hide(); $('.num-not-working').hide(); $('.num-bad').show(); $('.num-blue').hie(); } if ($("select[name='status-type']").val() == "not-working") { $('.num-good').hide(); $('.num-not').hide(); $('.num-not-working').show(); $('.num-bad').hide(); $('.num-blue').hide(); } if ($("select[name='status-type']").val() == "not") { $('.num-good').hide(); $('.num-not').show(); $('.num-not-working').hide(); $('.num-bad').hide(); $('.num-blue').hide(); } if ($("select[name='status-type']").val() == "blue") { $('.num-good').hide(); $('.num-not').hide(); $('.num-not-working').hide(); $('.num-bad').hide(); $('.num-blue').show(); } } my html
<section class="filter"> <p>filter search: <select id ="options" name="status-type" onchange="select_num()"> <option id="all" value="all">all numbers</option> <option id="good" value="good">good numbers</option> <option id="bad" value="bad">bad numbers</option> <option id="not-working" value="not-working">not working numbers</option> <option id="not" value="not">non numbers</option> </select></p> </section> <!-- valid numbers --> <table> <thead> <tr> <th>number</th> <th>status</th> </tr> </thead> <tbody> <tr class="num-good"> <!-- number --> <td>+1 (941) 888-888</td> <!-- status --> <td>good</td> </tr> <tr class="num-good"> <!-- number --> <td>+1 (941) 888-888</td> <!-- status --> <td>good</td> </tr> <tr class="num-not"> <!-- number --> <td>+1 (941) 888-888</td> <!-- status --> <td>not</td> </tr> <tr class="num-not-working"> <!-- number --> <td>+1 (941) 888-888</td> <!-- status --> <td>not working</td> </tr> <tr class="num-not"> <!-- number --> <td>+1 (941) 888-888</td> <!-- status --> <td>not</td> </tr> <tr class="num-bad"> <!-- number --> <td>+1 (941) 888-888</td> <!-- status --> <td>bad</td> </tr> <tr class="num-bad"> <!-- number --> <td>+1 (941) 888-888</td> <!-- status --> <td>bad</td> </tr> <tr class=""> <!-- number --> <td>+1 (941) 888-888</td> <!-- status --> <td>not number</td> </tr> <tr class="blue"> <!-- number --> <td>+1 (941) 888-888</td> <!-- status --> <td>blue</td> </tr> <tr class="blue"> <!-- number --> <td>+1 (941) 888-888</td> <!-- status --> <td>blue</td> </tr> <tr class="num-good"> <!-- number --> <td>+1 (941) 888-888</td> <!-- status --> <td>good</td> </tr> </tbody> my current code can found on jsfiddle here: http://jsfiddle.net/hodhlyw1/1/
i'm trying use jquery, if there better way in pure javascript prefer that. in advance help.
can simplify repetitive code down like:
var $rows = $('tbody tr'); // cache table rows $("select[name='status-type']").change(function(){ var val = $(this).val(); // current value if( val == 'all'){ $rows.show(); }else{ // hide show ones match filter class $rows.hide().filter('.num-' + val).show(); } });