One of the challenges I am facing involves a table with two columns and a select option dropdown box. Each row in the table is associated with a color - green indicates good, red indicates bad, and so on. My goal is to have all values displayed when the page loads, but once a user selects an option from the dropdown, only that selected value will remain visible while others disappear.
This is my current JavaScript implementation:
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();
}
}
This is how I have structured the HTML:
<section class="filter">
<p>Filter your 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>
// Table rows with corresponding classes for different statuses
</tbody>
The code can be accessed on jsFiddle via this link: http://jsfiddle.net/hodhLyw1/1/
I'm exploring the use of jQuery for this functionality, but would appreciate any suggestions for achieving the same outcome using pure JavaScript. Thank you in advance for any guidance provided!