MooTools1.2 chained select plugin

MooTools1.2 chained select plugin

Chained select plugin is developed using MooTools 1.2; it can display a tree having any number sublevels. The script gets the data based on the JSON string passed by a PHP (or other language) file located in the background.

The purpose of this class is to replace the classical chained select where you have 2-3 or more drop down lists chained together and they enable once you select an option from the previous one.

All CSS is externally located so you can change every aspect of the list in any way you want.

Chained select demo Click on the pseudo-select to open the options. Once opened, click the right arrow to see option's children (if any provided).
Once you pass over the first level, you will be able to navigate back by clicking the back link located on top.
To select an option, click the name.



Please enable JavaScript

Usage Include both files (MooTools Core and ChainedSelect.js) into the document head section.
Create an instance of ChainedSelect:

window.addEvent('domready', function(){
    new ChainedSelect({
                element:'container_id',
                selectName:'name of POST/GET variable',
                optionsURL:'URL fo JSON string generator file',
                optionsContainer:'id of the container containing the options list'});
});
Note: if element or optionsContainer are not provided, the script halts.
ChainedSelect supported parameters:
  • element: container id (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)
  • keepSelection: when true, 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
  • displayHistory: When set to true, after selecting an option it will display the full path to it ( ie: Parent1 - Parent2 - Selected option )

Quick links: Have you found this useful? Support it by donating.