Progressively enhanced connected selects
I am currently working on yet another pet project http://panditg.com (currenty underconstruction, there is a beta url if you want to try it out) its an Indian matrimonial website, in case you dont understand what that means read more here http://en.wikipedia.org/wiki/Marriage_websites .
Anyway that’s not the reason why this blog post was written as the post’s title suggests. I wanted to have a drop down for two items item1 and item2 and based on the selection of item1, item2 would change. I needed to have it working n the non javascript environment and also not make use of ajax to populate the second select box.
As always when I am trying to look for interesting solutions before I start thinking I somehow end up on this mans website 
So chris posted a really interesting solution but since I am using jquery for this project (and that i am fairly new to it) i decided to implement the same in jquery. I am sure it can be written in a better way as other jquery gurus can suggest, feel free to leave a comment.
Markup:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | <select name="quicksearch[religion]" id="quicksearch_religion">
<optgroup label="Hindu(Any Caste)">
<option value="Hindu(Any Caste)_1">Adi Dravida</option>
<option value="Hindu(Any Caste)_2">Aggarwal</option>
<option value="Hindu(Any Caste)_3">Agri</option>
<option value="Hindu(Any Caste)_4">Ambalavasi</option>
</optgroup>
... more markup
<optgroup label="Jain">
<option value="Jain_258">Digamber</option>
<option value="Jain_259">Shwetamber</option>
<option value="Jain_260">Others</option>
</optgroup>
<optgroup label="Parsi">
<option value="Parsi_261">Not Applicable</option>
</optgroup>
<optgroup label="Jewish">
<option value="Jewish_262">Not Applicable</option>
</optgroup>
<optgroup label="Buddhist">
<option value="Buddhist_265">Not Applicable</option>
</optgroup>
<optgroup label="Other">
<option value="Other_266">Not Applicable</option>
</optgroup>
</select> |
This select box is inside a form tag ofcourse and each form element is a list item, the last list item being the submit button etc. Someday when i have more time I would make this function more generic or make a plugin out of it. For now just as a note (#frm-quicksearch is the form and #quicksearch_religion is the select box)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /** * jquery to convert the large select into changed selects * to read from one master select item and make two different selects */ $(document).ready(function() { $('<li>').insertBefore('#frm-quicksearch > ol li:last').html('<select name="quicksearch_religion" class="religion">'); $('<li>').insertBefore('#frm-quicksearch > ol li:last').html('<select name="quicksearch" class="cast">'); $('select.cast').css('display','none'); // hide the parent select box $('#quicksearch_religion').css('display','none'); // popular the religion one $("#quicksearch_religion").find("optgroup").each(function() { $('select.religion').append('<option>' + this.label + '</option>'); }); // attach a handler $('select.religion').change(function() { // empty all select options $('select.cast').empty('option').css('display','block'); $('#quicksearch_religion > optgroup[@label=' + this.value + ']').find('option').each(function() { $('select.cast').append('<option value="' + this.value + '">' + this.text + '</option>'); }); }); }); |
This script has the following differences
- This only works for two level of selects, but not very difficult to add another level or make it generic for that matter
- Unlike the example http://icant.co.uk/sandbox/splitselect.html there is only one select box for the second level, the options are just removed and updated with the new options, not sure how fast it would be for larger list but it worked well for my requirements.
- If you are looking for pre-selected chained result see here or preselected select boxes with unlimited levels see here.
