I'm quite new to web-development, and have a problem which I can't solve. I have a table which has 3 items: car, color and motor type. Table example is here:
<table>
<tr>
<th>Car</th>
<th>Color</th>
<th>Motor type</th>
</tr>
<tr>
<td>Mercedes</td>
<td>Blue</td>
<td>Petrol</td>
</tr>
<tr>
<td>Mercedes</td>
<td>Red</td>
<td>Diesel</td>
</tr>
<tr>
<td>VW</td>
<td>Blue</td>
<td>Hybrid</td>
</tr>
<tr>
<td>VW</td>
<td>Yellow</td>
<td>Diesel</td>
</tr>
<tr>
<td>Alfa Romeo</td>
<td>Red</td>
<td>Diesel</td>
</tr>
<tr>
<td>Alfa Romeo</td>
<td>Green</td>
<td>Petrol</td>
</tr>
</table>
I want to add 3 dropdowns with checkboxes to filter selected items, one for car, one for color and one for motor type. Items in dropdown should be filled dynamically, based on the items in the table. For example:
- First dropdown will be consisted of 3 checkboxes: Mercedes, VW and Alfa Romeo
- Second will have Blue, Red, Yellow and Green
- and third one will have Petrol, Diesel and Hybrid
Also, when I select Mercedes, for example, Yellow and Green color should be hidden in second dropdown, and Hybrid should be hidden in third dropdown, since there aren't any Yellow/Green/Hybrid Mercedes.
Can someone please help with writing the appropriate JavaScript/jQuery file? Thank you a lot.
Aucun commentaire:
Enregistrer un commentaire