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 the modified function:
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: }
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.
[...] 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 )))))