I am starting to build "drill-down" select elements (select elements that filter their options based on previous options you have selected.

Being that I have never done this before, I am looking for a "best-practice" approach to this common situation. Could you point me to a tutorial, or provide some example code to how I should approach this?

Solution

I originally thought of hiding and showing options, but it turns out that approach is not cross-browser compatible. The easiest, cross-browser method I have come across is creating a copy of the original select options and replacing the options once the user has made a selection. I wrote a little jQuery plugin that makes it a bit more reusable.

<select id="first">
    <option value="1">Fruits</option>
    <option value="2">Vegetables</option>

</select>
<select id="second">
    <option> -- Select -- </option>
    <!-- class is in the format of "parentId_parentValue" -->
    <option class="first_1" value="1">Apple</option>
    <option class="first_1" value="2">Orange</option>
    <option class="first_1" value="3">Banana</option>
    <option class="first_2" value="4"&g开发者_运维问答t;Carrot</option>
    <option class="first_2" value="5">Broccoli</option>
    <option class="first_2" value="6">Spinach</option>
</select>

<script type="text/javascript">
$.fn.drilldown = function(child) {
    var $parent = this;
    var parentId = $parent.attr('id');
    var $child = $(child);
    var childId = $child.attr('id');
    var optionIdentifier = '.' + parentId + '_';
    var selectedChildOption = $child.val();
    var $childCopy = $('<select id='+parentId+childId+' />');
    
    $childCopy.html($child.find('option')).hide().appendTo('body');
    
    var refreshOptions = function(){
        var selectedParentValue = $parent.val();
        $child.html($childCopy.find(optionIdentifier+selectedParentValue).clone());
        $child.prepend('<option value="0" selected="selected"> -- Select -- </option>');
    };
    
    refreshOptions();
    $child.val(selectedChildOption);
    
    $parent.change(function(){
        refreshOptions();
        $child.trigger('change').focus();
    });
};

$(document).ready(function(){
    $('#first').drilldown('#second');
});
</script>

Here is a jsFiddle to show that it works.

If you can use jQuery there is a nice plugin to do so: http://www.ajaxray.com/Examples/depend.html

it basically uses classes to define the hierarchy e.g. parent select option 1 has value of abc, child select options belonging to parent will have class sub_abc.

Nice and simple! There are many ways of doing this of course, this seems to be a very simple route.

I might do something like this:

$(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]));
        }
    });
});

Fiddle here

I would only do that for small data sets however. If you have a massive amount of data that you want to toggle (i.e. dealing with geo data sets), I would most likely fetch the data via .ajax()