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
[...] jQuery controlled dependent (or Cascadign) Select List. [...]
[...] jQuery controlled dependent (or Cascadign) Select List. [...]
Hey Pablo,
use this:
function makeSublist(parent,child,isSubselectOptional,childVal)
{
$(”body”).append(”");
$(’#'+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(” — Select — “);
$(’#'+child).trigger(”change”);
$(’#'+child).focus();
}
);
}
$(document).ready(function()
{
makeSublist(’child’,'grandsun’, true, ”);
makeSublist(’parent’,'child’, false, ‘1′);
});
JQuery >3 has a new selectors engine:
>>OLD: <>NEW: <<
$(”#”+child).val(["'+ childVal +'"]).attr(’selected’,’selected’);
[...] jQuery controlled dependent (or Cascadign) Select List [...]
[...] 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 [...]
[...] jQuery controlled dependent (or Cascadign) Select List [...]
It would have made sense if you had placed a downloadable sample
@African Boy,
Thanks a lot suggestion.
I’ll do it soon.
Subscribe
Thanks for the code snippet.
With jquery 1.2.6 it works fine.
Under jquery 1.3.2 it doesnt. The console has the error:
[Exception... "'Syntax error, unrecognized expression: [@value="1"]‘ when calling method: [nsIDOMEventListener::handleEvent]” nsresult: “0×8057001e (NS_ERROR_XPC_JS_THREW_STRING)” location: “” data: no]
Any ideas?
Thanks,
Andy
Max post
Saving an 11-run lead
Thank you author
A downloadable sample or source code for a simple form with 2 or three select boxes would go a long way in furthering my understanding of how to implement this.
[...] jQuery controlled dependent (or Cascadign) Select List. [...]
Colorflow 1.0
hi
This is great and exactly what i’m looking for – however i cant get the script working with jquery 1.3.2. do you have any ideas please?
Thanks
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
Does anyone know how to make this work with jQuery 1.3.2?
This is really great plugin for JQuery! I like it )))))
[...] Ajax Username Check with jQuery . ??????(Form – Select Box stuff) jQuery Combobox . jQuery controlled dependent (or Cascadign) Select List . Multiple Selects . Select box manipulation . Select Combo Plugin . jQuery – LinkedSelect [...]
[...] Ajax Username Check with jQuery . ??????(Form – 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 – [...]
You should get JQuery to add this to their code repository and then other people will support it. This is very useful.
Thank you author
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
I too am having similar issues as Carlo. It appears that jQuery 1.3.2 does not work with this code. I am not sure what it is about it though, the new version of jQuery doesn’t like about it.
Thanks so much for this. Just one question – any idea why when I try to implement this the first time you navigate to the page the “grandson” element is blank, but when I refresh it shows up?
Actually, I guess I can solve this by creating a “select a composer” drop down on my page.
[...] 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 [...]
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.
[...] 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 [...]
[...] Box stuff jQuery Combobox. jquery.combobox jQuery controlled dependent (or Cascadign) Select List. jQuery controlled Dependent (or Cascading) Select List 2 | Let’s explore the web technologies … Multiple Selects. jqmultiselects – Google Code Select box manipulation. ::TexoTela:: jQuery [...]
[...] jQuery controlled dependent (or Cascadign) Select List. [...]
[...] Combobox.jQuery controlled dependent (or Cascadign) Select List.Multiple Selects.Select box manipulation.Select Combo Plugin.jQuery – LinkedSelectAuto-populate [...]
[...] 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 [...]
[...] 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 [...]
[...] 2.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 [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]