Second Drop down box needs to be dynamically populated - html

Question

Is it possible to second drop down box dynamically populated based on the values on first drop down box.
<select name="category">
<option value="0">None</option>
<option value="1" rel="accessories">Cellphones</option>
<option value="2" rel="sports">Sports</option>
<option value="3" rel="cars">Cars</option>
</select>
<select name="items" class="cascade">
<option value="3" class="accessories">Smartphone</option>
<option value="8" class="accessories">Charger</option>
<option value="1" class="sports">Basketball</option>
<option value="4" class="sports">Volleyball</option>
<option value="6" class="cars">Corvette</option>
<option value="2" class="cars">Monte Carloe</option>
</select>

Answer 1

Yes it is possible. Using jquery it would look something like this:
$('select[name="category"]').on('change',function() {
// hide everything
$('select[name="items"] option').hide();
// show matching items
$('select[name="items"] .'+$(this).find(":selected").attr('rel')).show();
// make the top one selected
$('select[name="items"] .'+$(this).find(":selected").attr('rel')).first().attr('selected','selected');
});
If you want to pull the list more dynamically you can use the above as a starting point but fill in the options with an ajax call, as opposed to listing all the options out and hiding/showing.