ChainedSelect is a MooTools 1.2 JavaScript plugin that enables the user to navigate through parent – children tree structure with indefinite number of nodes and make a selection when the desired option is encountered.
This approach offers a more powerful solution versus the classical drop down boxes chained together for a number of reasons: it takes significantly less space in the page; it can contain any number of nested levels, navigation would not be harmed; it can be styled according to the overall page design from CSS and most of all, it looks better.
The purpose of the plugin is to replace the classic chained dropdown lists that have 2 or more selects and get populated with options once you select an option from a previous one.
The whole idea behind this plugin evolves around the tree structure generated by a PHP file and sent to JavaScript as a JSON string. Giving the fact that the whole structure of the tree is loaded, the request to the PHP script is made only once and then the response is reused when navigating the nodes. Once a node is selected, the plugin allows the user to return on the path he used to get to the current node.
If an option is selected and the script that verifies the user’s entry returns an error (for example the e-mail address is invalid), the plugin offers the possibility to display the last selected option leaving it selected and accessible in POST / GET depending what method you used on the form.
To retrieve the value selected by the user, you need to give a variable name and retrieve it from POST / GET based on that name. When creating the class instance, that variable name is specified using the selectName parameter. For example, if you give this parameter a value like “selected_option”, when the user submits the form, you can retrieve the selected options from $_POST['selected_option'].
The tree structure generated by the PHP script is basically a multidimensional array having as keys the nodes ids (that can come from a database) and as values the children array. The ChainSelect plugin assumes that the main node is 0 and all other nodes descend from it. Once a value is set as id (key) for an entry, it cannot be used again.
1 2 3 4 5 6 7 8 9 10 11 | <?php // this is the main node and has 0 as key always $tree[0] = array(1=>'First', 2=>'Second', 3=>'Third'); // children of First, the key is 1 same as the key First has in the array above $tree[1] = array(4=>'First child in First parent', 5=>'Second child in First parent'); // children of Second; we add only one $tree[2] = array(6=>'First child Second parent'); // we add a child to the child of Second $tree[6] = array(7=>'First child from First child of Second parent'); // got it? good. ?> |
The basic functionality of the JavaScript plugin is as follows: in the HTML, the default message displayed (a select having the full tree for example) is wrapped inside a div that mimics a dropdown list. Once the plugin starts, the content of this div is replaced with a default message send as a parameter and on click the options list is displayed after the JSON response is loaded.
The plugin parameters are:
- element: the div that mimics the dropdown (default:null)
- optionsContainer: id of the element containing all the options (default:null)
- selectName: POST/GET variable name (default:null)
- selectedValue: the selected value set as default value (ie: if page refreshed and you want to keep the option) (default:null)
- selectedMessage: the selected text corresponding to the selectedValue id(ie: if page refreshed and you want to keep the option) (default:null)
- defaultMessage: default message displayed into the fake select (default:’Please select an option’)
- navHome: title for the first panel of options (default:’Main options’)
- optionsURL: the URL to the file that generates the JSON string (default:null)
- fromTop: aditional distance between the fake select and the options container (default:15)
To use this plugin, add the MooTools framework and ChainedSelect.js into the head section of the document and create an instance of the plugin with at least the parameters stated below:
1 2 3 4 5 6 7 8 9 | <script language="javascript" type="text/javascript"> window.addEvent('domready', function(){ new ChainedSelect({ element:'fake select div id', optionsContainer:'id of the options list container', selectName:'name of your $_POST/$_GET variable', optionsURL: 'URL to PHP file that generates the JSON string'}); }) </script> |
The styling of the options list is made based on the optionsContainer parameter and all inner elements are styled as descendant from it. So basically, if you want to use a different id for the optionsContainer you will change the id in the stylesheet and leave all the other CSS styling names as they are.
Updates
July 20′th 2009
- new parameter added keepSelection. When set to true, after selecting an options, it will keep the option selected inside the options list. When set to false, after selecting, it will reset to the first level of options.
September 1’st, 2009
- new parameter added displayHistory. When set to true, after selecting an option it will display the full path to it ( ie: Parent1 – Parent2 – Selected option ).
Related posts
Was this useful? Show your support.
17 comments
There is a bug.
If you move your mouse just below the drop down chained select, the mouse gesture turns to a hand, which means the area is clickable — if you click, it auto-selects an option for you.
Please fix
Thanks for the bug report. Fixed and updated. Please clear cache to view the new version. And spread the word if you like the script. Thanks again.
Thanks. It works fine.
However when the drop down box is opened, if you try to click anywhere on the screen other than the drop down the drop down never goes away.
Indeed, the only way to get rid of a drop-down select is to click on the downward arrow icon in the originating select box.
Also, I require the following.
1. Select a country.
2. Select a state.
3. A submit button.
Where the state grabs the contents of a selected country, and where if there is no country selected then the form cannot be submitted and neither can the state be selected.
Thanks
You could do a submit script an check that the value on the hidden input you store the selected option is not empty and disable form submission until something is selected.
very slick script, I am going to attempt to modify it to make it carry a bit more information about the option – especially with something that could possibly take 100 options the chance of repeating names is big.
Also I am going to try and let you choose multiple options by feeding the selection into a new input each time you select one..
Will post the script and a link once I am done.. (or you could do it for me??.. lol)
I assume that you read AD’s comments
. Funny guy, very funny guy.
Well, what can I say, I’m glad you like the script. Good luck with the changes, I would really love to see the final version you come up with. Maybe it will help someone else too.
once i select an option the select closes. if i click to reopen the options it shows the last level i was at. is there a way to have it reset back to the top most parent? thanks.
Thanks for the suggestion Cesar. I implemented the behavior you asked for. Please download the example files again. I added a new parameter called keepSelection. When you set this to true, it will keep the last level, when false, it will do exactly what you asked for.
thanks much!
Is it possible to retrieve, all options from the selection, i mean:
First choice – Second choice etc. So that I get all the choices from the user
You mean like in multiple select ( <select multiple=”multiple”… )? If this is what you need, currently no, sorry.
No i mean
get the selection chain ex.
value in the first choice+value in the sub choice+value in the subsub choice
Web resources+Learning+PHP+php.net
every value so i can see the parent values like above, because some value at the end could be the same, but it will nice where it started
Hi Søren,
I see what you mean. Please check the download section, I updated the script with a new parameter that allows enabling/disabling the feature you asked for. Enjoy and please let me know if you encounter bugs. Thank you for the suggestion. Just like Cesar’s idea, this is a good addition to the script.
I’m a newbie in this kind of thigs. I want to use your javascript chained select script as a menu and I need the last array in the group to be a link. Can you tell me how to do this?!
Many tahnks.
Alfred!
This script is not developed for what you want to do. I suggest maybe using a javascript menu instead. You can find lots of those with a simple google search.
excellent work!!!!!!!!!!!!!!!!!!!!!!!! Ilike it so much!!!!!!
but a project is so sweet. I want a tutorial about “how to make scroll the menu bar with scrolling the page”
Thanks
Tell me more about the tut you want. Drop me a line from the contact page please and details a little what you want.
Leave a comment