First drop down menu to auto change the options of a second dropdown

Question

I have two drop down menus where the options are not get from the database.

The first one, lets the user to select a category.

<select name="category">
    <option value="0">None</option>
    <option value="1">First</option>
    <option value="2">Second</option>
    <option value="3">Third</option>
    <option value="4">Fourth</option>
</select>

The options of the second, are depended from the choice in the first dropdown menu. For example, if the user chooses the First option then the second dropdown will show

<select name="items">
    <option value="3">Smartphone</option>
    <option value="8">Charger</option>
</select>

but when the user change his mind, or select the second option first, then the second dropdown will now show

<select name="items">
    <option value="1">Basketball</option>
    <option value="4">Volleyball</option>
</select>

My question is how can I achieve this ? Can this be done without using a database?

Thank you!

Answer 1

The part about the database isn't really clear, since the selects would presumably be "listed" in some fashion. If you have them in some other format, that makes sense, or if you're asking if a call back to the database (postback) is necessary, the answer is no. But it's not clear what you mean.

Anyhow, you could use a rel="" value (or data-items="") to set the relationship between the one select to the other.

For example:

CSS

.cascade {
    display: none;
}

HTML - Modified

<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>

jQuery

$(document).ready(function(){
    var $cat = $('select[name=category]'),
        $items = $('select[name=items]');

    $cat.change(function(){
        var $this = $(this).find(':selected'),
            rel = $this.attr('rel'),
            $set = $items.find('option.' + rel);

        if ($set.size() < 0) {
            $items.hide();
            return;
        }

        $items.show().find('option').hide();

        $set.show().first().prop('selected', true);
    });
});

http://jsfiddle.net/userdude/bY5LF/