I am getting a lots of request and questions from visitors about adding some features and some other problems. Sometimes I faced some problem when using this script myself. So, I have made some changes here. I hope, this change will help you to overcome some problems of previous version of this script. The main features added in this version are:

It will keep in child list box only sub items of selected parent value when initializing.

249 Comments

Excellent work on this! I’m new to jquery, but here is a modified version of your makeSublist() method that has the behavior that I was looking for.. namely disappearing/reappearing sublists, and working on Firefox 2, IE 6, IE 7, and Safari.

@Martin
Hi Martin, Thanx for ur question.
I think, u may already get the solution. If not, please follow this steps:
1. Set the urls, where u want to rediract as the values of child select box.
2. On change event of child select box, call a function to rediract the page like this:

I am new to developing web sites with some very basic knowledge of PHP, some MySQL and a bit of HTML and almost none of Java. I have been trying to have 3 dependat option boxes. I tried to incorporate your script into the data extraction from MySQL to narrow down the department name down to financial years and further down to months for available reports to view. I am getting very ad-hoc results. I have listed my script here and I would greatly appreciate any help. Many thanks:

Please note that in the latest version of Jquery 1.2.2, this does not work in IE browser (6.XX)

The older version of Clone function is quite different from the new version of Jquery.

TO workaround, you acn copy the clone fuction from old Jquery to the nwe jquery script and name it as clone_old and use clone_old in the line and it should look like this:
$(â€˜#â€™+child).html($(“#”+parent+child+” .sub_”+parentValue).clone_old());

I am wanting to incorporate your script into a dynamic php+mySQL app, and it works WONDERFULLY for creating new records. Problem is encountered when I attempt to show user an existing record for editing that has an existing value for child field. How do you get the initialization function to recognize and retain the value passed from the database.

Sorry to bother you again. But making that last change has introduced other problems. Now the child does not filter values based on parent change it shows all values available and does not change. *darn it*!

Got it! (with a small *duh*) I was quite obviously calling for the value of the child element incorrectly for use in the makeSublist function. Thanks again for sharing solution and providing supporting explanation.

Very good script! But it only works with regular characters and no blank spaces… 🙁
Is there a way to use it with options like “cork oak”, or “tÃºlipa”?
I’ve tried with different CHARSET, but never worked.
Thank you in advance.

I was trying to implement this and for some reason cannot get the “none” selected in IE6. Not sure if this is an IE6 bug, but I’m working with 1.2.6 version of jQuery. Is there something else I’m missing for this example?

Thanks for this great script!
I am trying to implement it in a Zend Framework environment, but the problem is that I can’t assign a css class to in any select box. I have therefore tried to match the relevant child-options by their value. I have then a bunch of options with the value journey_ID_SECID where the first ID is the exact value of the first select-box and SECID is the DB-ID I am using for further processing and validation. Is there a possibility to do this sort of matching?
Cheers!

@Dobo
Hi Friend,
I’ve already implemented it with ZF in my previous project which was 90% same with your idea. 🙂
If you are using Zend_Form, you can assign a class to a select box as:
$mySelectBox->setAttrib(‘class’, ‘large’);

Hope to write a post about implementing this script with Zend Framework by next Weekend.

My form is extending the main Zend_Form class and is being declared in a separate file in the appropriate directory.

This is how my controller currently looks like (the relevant part of course):
foreach($alltours as $select_input):
$form->reisen->addMultiOption($select_input[‘id’], $select_input[‘name’]);
if(!empty($id)) $form->reisen->setValue($id);
endforeach;

foreach($alltours as $select_input):
$form->reisetermin->addMultiOption(‘termin_’.$select_input[‘id’].’_’.$select_input[‘date_id’] , date(‘d.m.Y’, strtotime($select_input[‘date_start’])) );
//$form->reisetermin->setAttrib(‘class’, ‘large’);
endforeach;
As you can see, I am filling the values of the with a loop, whereas the form element “reisetermin” is being declared in the form/form.php file.

Now your script, being as good as it is, is matching the sublist-values by their class-name. I however have no possibility to set multiple class-names to the options in this -box. That is why I tried doing it by a value-match, and that is where I got stuck.

I am a true amature and appreciate your assistance. My ultimate goal would be to use the first listbox for a list of all the states, the second for all the cities and the third for the names of schools within those cities. Once they select the school, it would launch a URL to details about that school. I attempted to update the script that you had provided for the example, but I can’t get it to work. Below is the final code I have. Is there a way to refer the scripts to an XML file for the list?

This version only works under Jquery 1.2.6 not 1.3.2. so please update for us. thanks.
I have a problem which is that the –select– item is not preselected when parent item is changed. Instead, the first real item is selected. –select — was there, but it is not preselected.

Hi,
I am trying to get this to work for employees table – all three are required:
select1: office name
select2: office location
select3: first name, last name
Based of the name selected – I populate the remaining fields of the form.
any suggestions..
Thanks
GS

Thank you for this beautiful script. I have a situation were i want to create dynamic dependent drop down list. For e.g. There is a Room drop down with values 1 to 4. If i select 1. Then there will two more drop downs one for Adult and second of Children. If you select 2 then there should be 2 row of drop down for adult and children. The children drop down goes from 0 to 4. If i select 4 from Children drop down then four drop down for age should populate.

On LHS of this site find your hotel, http://bestofvegas.com/ I want to do something similar to this. Can you advice how can the same be achieved with jquery.