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 [...]
[...] 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 [...]
[...] 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 – LinkedSelect [...]
thanks
[...] 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 [...]
Somewhere I have seen … And if on that very much.
[...] 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 – LinkedSelect [...]
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.
Thank you Dobo.
@Anis
Hi Anis,
Thank you for the quick reply.
Here is my current problem(more detailed):
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.
Any help will be greatly appreciated.
Thanks in advance!
[...] 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 [...]
Hi again,
I figured it out. As I said, my tags had no class-names and values like “termin_1_12″.
When I added this:
$(”#”+child+” option”).each(
function() {
var buildChildData= $(this).attr(’value’).split(”_”);
$(this).addClass(”sub_”+buildChildData[1]);
});
to the top of your function it all worked out.
Thank you once more for the great script!
@Dobo
Yes friend! that’s the technique.
But needs a little change for re-setting values (otherwise you can it in backend).
Just like this-
$(â€#â€+child+†optionâ€).each(
function() {
var buildChildData= $(this).attr(’value’).split(â€_â€);
$(this).addClass(â€sub_â€+buildChildData[1]);
$(this).attr(’value’, â€sub_â€+buildChildData[<value-index>]);
});
I couldn’t post the solution yet as promised because of time. Hope to do it soon. U r invited to visit(and suggest to make it better) that.
[...] 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. [...]
[...] 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 [...]
[...] jQuery controlled dependent (or Cascadign) Select List. [...]
So many Jquery Plugins. 200+
thank u for this topic. its very important for us
Hi, I am Yurtdisi Egitim from Turkey. On this web site i have found answers to most of my questions. Thanks to everyone for your time.
[...] 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. [...]
I am new to jquery and would like to know where to change the script so that the function does the following:
When user selects the last option of list 3, it launches a URL.
Any assistance in providing the exact script for this action would be greatly appreciated.
Thanks in advance!!!
I am attempting to develop a site to which I would like to use 3 listboxes which are dependent to one another. At the very last selection of the 3rd listbox, I would like a script to launch a URL.
Is there anyone that can assist in providing source code that modifies the code to allow it to perform the launch of a URL?
Anyone that can assist, it would be appreciated.
Thank you!
@Tony Fox
Hi friend,
It’s very simple.
just 2 steps
1. Make the select boxes cascading as the demo shows.
2. in your $(document).ready, bind a function with 3rd select box:
$(”#3rd-select”).change(function () {
if($(this).val() == ‘a-value’)
{
window.location=”http://someplace.com”;
}
elseif($(this).val() == ‘another-value’)
{
window.location=”http://some-other-place.com”;
}
})
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?
Again, thanks for your assistance!
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+’ option[@value="'+ 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′);
});
$(’grandsun’).change(function ()
{
if($(this).val() == ‘13′)
{
window.location=”http://www.yahoo.comâ€;
}
elseif($(this).val() == ‘14′)
{
window.location=”http://www.google.comâ€;
}
})
I’d like to do exactly how the page linked below works, but instead of 2 listboxes, possibly 4 (State, City, School,Grade Level).
http://labs.adobe.com/technologies/spry/samples/data_region/DataSetMasterDetailSample.html
This example seems simple, but I can’t get it to work. I noticed it uses XML.
I’m using the latest jQuery v1.3.1 and it keeps throwing the following exception:
Syntax error, unrecognized expression: [@value="selected_val_of_child"]‘ when calling method: [nsIDOMEventListener::handleEvent]
Is there a fix or workaround for this?
[...] 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 Auto-populate [...]
[...] Combobox. jQuery controlled dependent (or Cascadign) Select List. Multiple Selects. Select box manipulation. Select Combo Plugin. jQuery – LinkedSelect [...]
@Pablo
Hi,
Can u plz tell me your browser version?
@Anis
This is happening on both Firefox v3.0.6 and IE v7.0
thanks