jQuery controlled Dependent (or Cascading) Select List

July 15, 2007 by anisniit

When I was searching the web for a client side dependent list boxes, I got some scripts. But some of them were very much static (static select name, option name etc.), some were vary complex. Then I thought to make it myself.
I have been using jQuery as the standard JavaScript library for most of my web project for some days. Writing javascript coding in jQuery is fun. So here goes my contribution using it.

Here is a simple demo.

Let me guide you through it.

1. Include jqury.js.

You can get Jquery from here.

2. Write this simple function in a javascript block in head.

function makeSublist(parent,child,isSubselectOptional)
{
$(”body”).append(”<select style=’display:none’ id=’”+parent+child+”‘></select>”);
$(’#'+parent+child).html($(”#”+child+” option”));
$(’#'+child).html(”<option> — </option>”);
$(’#'+parent).change(
function()
{
var parentValue = $(’#'+parent).attr(’value’);
$(’#'+child).html($(”#”+parent+child+” .sub_”+parentValue).clone());
if(isSubselectOptional) $(’#'+child).prepend(”<option> — Select — </option>”);
}
);
}

This function takes 3 arguments: the parent select input’s id, the child select input’s id, and a boolean value to indicate whether to select an item from child list by default.

Example: makeSublist(’listA’,'listB’,false);

This function will make the options of ‘listB’ list depending on the selection of ‘listA’. And user have to select an item from ‘listB’.
Here ‘listA’ and ‘listB’ are the IDs of parent and child select input respectively.

3. Add a class to the ‘<option>’s of the child list box. The class name will be the value of it’s parent ‘<option>’ in parent listbox with a ’sub_’ prefix.
Suppose, in parent listbox there is an item “Flower”. Its value is ‘fl’:

<option value=’fl’>Flower</option>

When the item “Flower” will be selected, only 3 items should be visible in child listbox. These 3 items should hold the class name ’sub_fl’:

<option class=”sub_fl” value=”1″>Rose</option>
<option class=”sub_fl” value=”2″>Sunflower</option>
<option class=”sub_fl” value=”3″>Orchid</option>

4. Now you are ready. On ‘$(document).ready’ event of Jquery, run the function to associate your list boxes.

$(document).ready(function()
{
makeSublist(’parentID’,'childID’, false);
});

5. Enjoy
———————————————————
Hi friend,
2nd version of this script is published with some addition and modification.
visit the new version here.
Thanks.

Posted in Jquery, javascript | 25 Comments

25 Responses to “jQuery controlled Dependent (or Cascading) Select List”

on July 16, 2007 at 5:59 am1 hasin

Start of a new epic, finally!!

Welcome to the wonderful world of bloggers.
on July 16, 2007 at 6:00 am2 Tarek

Nice. It’s a great work…I hope u will do more for helping us…

keep it up..
on July 16, 2007 at 2:09 pm3 Mohamed Badr

nice function but where is the dynamic part ?? i am always in search of a such script but getting the values from the db, so it need some php works , don’t you think ??
on July 16, 2007 at 4:46 pm4 murad

Well done! Keep it up.
Murad.uk
on July 16, 2007 at 6:57 pm5 Sharif Abdullah

Nice Blog.
on July 16, 2007 at 9:18 pm6 anisniit

Hi Mohamed Badr,
Thanx for ur comment.
Here the dynamic matter is that, you can set option values from database using php and can make multiple and multilevel dependent listbox.
You can use this simple technique to set list options from db using php:

<select name=”parentList” id=”parentList” size=”1″>
<option value=”none”>– Select one –</option>
<?php
while($row = mysql_fetch_array($result, MYSQL_BOTH))
{
echo “<option value=” . $row['optionValue'] . “>”. $row['optionText'] .”</option>”;
}
?>
</select>

And for child lists :

<select name=”childList” id=”childList” size=”1″>
<?php
//subItems of Man
while($row = mysql_fetch_array($resultMan, MYSQL_BOTH))
{
echo “<option class=’sub_men’ value=” . $row['optionValue'] . “>”. $row['optionText'] .”</option>”;
}
//subItems of Woman
while($row = mysql_fetch_array($resultWomen, MYSQL_BOTH))
{
echo “<option class=’sub_women’ value=” . $row['optionValue'] . “>”. $row['optionText'] .”</option>”;
}
?>
</select>

Now your class names of child list is organised and you can use the function to make them associate.
Thanx again.
on July 18, 2007 at 10:35 am7 Dave

Perhaps a more semantic way to do this would be with optgroups? You shouldn’t need to do much with IDs then. This would convert 1 select box with multiple sub-options into 2 select boxes as you have done.

Have a look at http://www.wait-till-i.com/index.php?p=411

Should be easy to convert that to JQuery.
on July 18, 2007 at 1:27 pm8 anisniit

Hi Dave,
Thanx a lot. It’s really a nice way.
But, the problem in this technique is, a parent option without any child option is not possible here. But sometimes, we need the flexibility to use options which may have or may have not any child option.
However, I m thinking to write another function based on this technique and automating next processes using jQuery.
Thanx again for ur suggestion.
on August 20, 2007 at 10:09 am9 webdude

How would you add a third or forth select option.
on August 20, 2007 at 5:45 pm10 anisniit

Hi webdube,
Its very easy

For multiple dependent select lists :
$(document).ready(function()
{
makeSublist(’parentID1’,’childID1’, false);
makeSublist(’parentID2’,’childID2’, false);
makeSublist(’parentID3’,’childID3’, false);
});

For multilevel dependent select lists :
$(document).ready(function()
{
makeSublist(’selectID1’,’selectID2’, false);
makeSublist(’selectID2’,’selectID3’, false);
makeSublist(’selectID3’,’selectID4’, false);
});

Please tell me if any confusion.
Thanks
on October 1, 2007 at 11:16 am11 moose

Well, that works well, but if you have really large list of values, it doesn’t scale well, since every possible value is in the from the start.
Imagine having each parent with a couple thousand children…
Any idea?
on October 1, 2007 at 5:12 pm12 anisniit

Hi moose,
Yes, you are right. It will serve consistent result only when “every possible value is in the from”. So, I suggest to make the association in the “$(document).ready()” function of JQuery.

Thanx a lot for your comment.
on October 5, 2007 at 7:52 am13 deviantz

Very Nice.. thanks for this tutorials.. I really need this!!

keep it up!!

best,

deviantz
on October 26, 2007 at 3:19 am14 Visitor277

I have visited your site 102-times
on November 6, 2007 at 2:12 pm15 wondering

Can you give an example on doing 3 levels, with each one dependent on the previous? I tried with your suggestion with
$(document).ready(function()
{
makeSublist(’level1′,’level2′,false);
makeSublist(’level2′,’level3′,false);
}

and it doesn’t quite work for the third level. Am I missing anything? Thanks in advance.
on November 7, 2007 at 2:41 am16 wondering

anisniit,

Is it possible to select a blank option in the second level instead of selecting an option already?

thanks
on November 7, 2007 at 3:25 am17 wondering

Does anyone here use isSubselectoptional parameter and manage to make it to default to a blank option?
on November 9, 2007 at 6:40 am18 ajaXray » Blog Archive » jQuery controlled Dependent (or Cascading) Select List 2

[...] you all. Thanx for using, commenting and visiting my script jQuery controlled Dependent (or Cascading) Select List from my old bolg http://php4bd.wordpress.com and [...]
on November 9, 2007 at 8:44 am19 anisniit

HI All,
Thanx a lot for visiting here.
I just released a modified version of this script at my current blog http://www.ajaXray.com/blog
Here is the modified script:
http://www.ajaxray.com/blog/2007/11/08/jquery-controlled-dependent-or-cascading-select-list-2/

The main features added in this version are:
1. It will keep in child list box only sub items of selected parent value when initializing.
2. Added a 4th parameter to input a selected value for child list box.
3. When “isSubselectOptional” is true, add a default value ‘none’ for ‘– Select –’ option of child list box.
4. Automatically focus the child list box when a value is selected from parent list box.
5. More effective for multilevel association.

You are invited to visit the moderation and my new blog.
on November 9, 2007 at 8:49 am20 anisniit

@wondering:
Thanx for asking.
If u pass true for the 3rd parameter isSubselectoptional, a blank option will appear for child list box. In modified version (see previous comment) the blank option ‘– Select –’ will have a value ‘none’.

For multilevel select box, your association should start from child most list box.
Just like this:
$(document).ready(function()
{
makeSublist(’child’,'grandson’, true);
makeSublist(’parent’,'child’, false );
});
It will work fine. But the new version is more effective for multilevel cascading. I have added a demo of multilavel subselect in the post of new version.
Thank you.
on November 14, 2007 at 8:35 am21 John

Hi - I’m just starting out with jQuery, and need to build some linked select menus for a project I’m working on.

Thanks for a very clear example of how to go about this.

Cheers
on January 24, 2008 at 11:58 am22 Matthijs

I seem to have a problem in IE, default the last item of the child list is selected, no matter what I do
on March 31, 2008 at 11:06 pm23 Speano

Hello
Was just serfing on net and found this site… want to say thanks. Great site and content!
on July 9, 2008 at 11:59 am24 leena

Will this work with 3 or more drop downs?
on July 9, 2008 at 5:10 pm25 anisniit

@lenna
Hi
It surely works with multiple and multilevel select boxes.
See comment 10 for example.

you may get more examples at my current blog http://www.ajaxray.com/blog

Thanks for asking.