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:
- It will keep in child list box only sub items of selected parent value when initializing.
- Added a 4th parameter to input a selected value for child list box.
- When "isSubselectOptional" is true, add a default value ‘none’ for ‘– Select –’ option of child list box.
- Automatically focus the child list box when a value is selected from parent list box.
- 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.
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();
});
}
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
[...] Combobox jQuery controlled dependent (or Cascadign) Select List Multiple Selects Select box manipulation Select Combo Plugin jQuery – LinkedSelect Auto-populate [...]
Hi All
I’ve added TuxX’s proposed function (with little change) in the main post for jquery 1.3.x users. Additionally, added a demo for jquery 1.3.2.
I hope, it’s easy enough to understand and use. For better understanding, you can see the source code of demo pages and this post : http://www.ajaxray.com/blog/2007/07/15/javascript-controlled-dependent-or-cascading-select-list/
Someone have reported a problem with default –Select– option. It’s also fixed.
Thanks to all for using and asking for jquery-1.3.x compatible version (and complaining for being late)
Here is the demo for jquery-1.3.x users: http://www.ajaxray.com/Examples/depend-1.3.x.html
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] ComboboxjQuery controlled dependent (or Cascadign) Select ListMultiple SelectsSelect box manipulationSelect Combo PluginjQuery – LinkedSelectAuto-populate [...]
Thank you very much for your function. It saved me many hours.
nice tutorial …thank you
[...] – Select Box stuff jQuery Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] jQuery controlled dependent (or Cascadign) Select List. [...]
[...] – Select Box stuff) jQuery Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] jQuery controlled dependent (or Cascadign) Select List. [...]
[...] Combobox jQuery controlled dependent (or Cascadign) Select List Multiple Selects Select box manipulation Select Combo Plugin jQuery – LinkedSelect [...]
[...] jQuery controlled dependent (or Cascadign) Select List. [...]
[...] Combobox jQuery controlled dependent (or Cascadign) Select List Multiple Selects Select box manipulation Select Combo Plugin jQuery – LinkedSelect Auto-populate [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
Found this after viewing part 1, this code is even better! Keep up the amazing work.
[...] jQuery controlled dependent (or Cascadign) Select List [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] Combobox jQuery controlled dependent (or Cascadign) Select List Multiple Selects Select box manipulation Select Combo Plugin jQuery – LinkedSelect Auto-populate [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] – Select Box stuff jQuery Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] Combobox jQuery controlled dependent (or Cascadign) Select List Multiple Selects Select box manipulation Select Combo Plugin jQuery – LinkedSelect [...]
[...] – Select Box stuff) jQuery Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] Combobox . jQuery controlled dependent (or Cascadign) Select List . Multiple Selects . Select box manipulation . Select Combo Plugin . jQuery – LinkedSelect [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
[...] Combobox jQuery controlled dependent (or Cascadign) Select List Multiple Selects Select box manipulation Select Combo Plugin jQuery – LinkedSelect Auto-populate [...]