jQuery controlled Dependent (or Cascading) Select List 2

Thank 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 here.

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:

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.

Click here to see a demo of multilevel association using this function. here is same demo for jquery 1.3.x users.

Here is the modified function (for < jquery 1.3):

 1: function makeSublist(parent,child,isSubselectOptional,childVal)

 2: {

 3: $("body").append("<select style='display:none' id='"+parent+child+"'></select>");

 4: $('#'+parent+child).html($("#"+child+" option"));

 5: 

 6: var parentValue = $('#'+parent).attr('value');

 7: $('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());

 8: 

 9: childVal = (typeof childVal == "undefined")? "" : childVal ;

 10: $("#"+child+' option[@value="'+ childVal +'"]').attr('selected','selected');

 11: 

 12: $('#'+parent).change( 

 13: function()

 14: {

 15: var parentValue = $('#'+parent).attr('value');

 16: $('#'+child).html($("#"+parent+child+" .sub_"+parentValue).clone());

 17: if(isSubselectOptional) 

 18: $('#'+child).prepend("<option value='none'> -- Select -- </option>");

 19: $('#'+child).trigger("change"); 

 20: $('#'+child).focus();

 21: }

 22: );

 23: }

Again, here is the function for jquery 1.3.x. Thanks a lot to TuxX for tuning up it to work with jquery 1.3.x.

[javascript]
function makeSublist(parent,child,isSubselectOptional,childVal)
{
$("body").append("<select style=’display:none’ id=’"+parent+child+"’></select>");
$(‘#’+parent+child).html($("#"+child+" option"));

var parentValue = $(‘#’+parent).attr(‘value’);
$(‘#’+child).html($("#"+parent+child+" .sub_"+parentValue).clone());

childVal = (typeof childVal == "undefined")? "" : childVal ;
$("#"+child).val(childVal).attr(‘selected’,’selected’);

$(‘#’+parent).change(function(){
var parentValue = $(‘#’+parent).attr(‘value’);
$(‘#’+child).html($("#"+parent+child+" .sub_"+parentValue).clone());
if(isSubselectOptional) $(‘#’+child).prepend("<option value=’none’ selected=’selected’> — Select — </option>");

$(‘#’+child).trigger("change");
$(‘#’+child).focus();
});
}
[/javascript]

And initialize the association on ‘$(document).ready’, as following example:

 1: $(document).ready(function()

 2: {

 3: makeSublist(’parentID’,'childID’, true, 'selected_val_of_child');

 4: });

If you want to create multilevel association, start the initialization from child most order. such as:

 1: $(document).ready(function()

 2: {

 3: makeSublist('child','grandson', true, ''); 

 4: makeSublist('parent','child', false, '3'); 

 5: });

For details instruction and example of using this script, please visit the previous version. Feel free to ask me if any problem with using this script or any bug you found.

UPDATE [09/10/09] : Updated function added for jquery 1.3.x