JavaScript drillthrough options

Question

I'm starting to create “drill” selection items (select items that filter their settings based on the previous settings you selected.

Being that I have never done this before, I am looking for a “best practical” approach to this general situation. Could you point me to a tutorial or provide some sample code, how should I approach this?

Decision

I initially thought about hiding and showing options, but it turns out that the approach is not compatible with a cross browser. The simplest, cross-browser method I've come across is creating a copy of the original selection options and replacing the parameters after the user made the selection. I wrote a small jQuery plugin that makes it somewhat 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">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 jsFiddle to show that it works.

Answer 1

If you can use jQuery, there is a good plugin for this: http://www.ajaxray.com/Examples/depend.html

it mainly uses classes to define hierarchies, for example. parent option 1 has the value abc, child option parameters belonging to the parent class will have the sub_abc class.

Nice and easy! Of course, there are many ways to do this; this seems to be a very simple route.

Answer 2

I could 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])); } }); }); 

Spell here

I would only do this for small datasets. If you have a huge amount of data that you want to switch (i.e. working with geodatasets), I will most likely extract the data through .ajax()