Selectbox Drilldown

by Jon Eyrick

HTML

<select id="category" style="width:200px">
    <option value="0" selected="selected">-- Select --</option>
    <option value="1">Fruits</option>
    <option value="2">Cars</option>
</select>
<p/>
<select id="subcat" style="width:200px"></select>

JavaScript

$(document).ready(function () {
    var sv = [
        [],
        ['apples', 'oranges'],
        ['honda', 'plymouth']
    ];

    $('#category').change(function () {
        $('#subcat option').remove();

        var a = sv[$('#category option:selected').val()];
        for (var n = 0; n < a.length; ++n) {
            $('#subcat').append($('<option></option>')
                .attr('value', n)
                .text(a[n]));
        }
    });
});