Dynamic Select jQuery plugin

This plugin simplifies the process of creating the dependencies of various select boxes one on another. For example in the situations, where you want to have the second select box populated with the options dependant on the choice from the first select box. You can just define the javascript object with desired structure/dependancy and let the rest to the plugin.

Usage

The most simple usage is to create a javascript object with the structure you want,

var desiredStructure = {

                          "Fruit" : {
                                     "apples" : ["green", "yellow", "red"],
                                     "pears"  : ["yellow", "green"]
                                    },
                          "Vegetables: {
                                        "carrots" : ["small", "big", "the smallest", "the biggest"],
                                        "onion",
                                        "garlic"
                                       }

};

assign it as structure property to a new object,

var obj = {structure : desiredStructure};

//or

var obj = new Object();
obj.structure = desiredStructure

and pass this new object to the dynamicSelect() method:

$("#some-wrapper").dynamicSelect(obj);

Selectors

By default, the plugin finds all the <select> elements inside your wrapper(s) and map your defined structure to these elements. If you want yourself to declare to which <select> elements inside the wrapper(s) the structure will be maped, you can define your own selectors as an array and add it to selectors property of the object. :

obj.selectors = ["#first-selector", "#second-selector", "#third-selector"];

It is possible to use any kind of CSS/jQuery selectors ("#first-selector", ".first-selector" etc.)

Captions

If you want to have your own captions at the top of the <select> elements, you can do it by creating an array with the captions and add it to captions property of the object:

obj.captions = ["--- pick something to eat ---", "--- choose first property ---", "--- choose second property ---"];

Options values

By default, the structure you defined is structure both for the text and for the values of the <select> elements. So, for example, the generated code will look like

<option class='dynamic-select-option' value='Fruit'>Fruit</option>

If you want to have different values for a given text, you can do it by creating an object with key : value pairs, where key is text (from the structure) and value is desired value which will render in value attribute:

var values = {
               "Fruit" : "commodity_1",
               "Vegetables" : "commodity_2",
               "red": "color_1"
};

obj.optionValues = values;

In this case the genereted code will look like:

 <option class='dynamic-select-option' value='commodity_1'>Fruit</option>

It is possible to have these text : value pairs defined only for some of the texts. If there is no value defined for a text from the structure, the text is also used as a value for the given <option> element.

"No-Select" value

If it is necessary to have a special value assigned to the <option> elements where no option is selected yet (i.e. one of the captions is selected for given <option> element), you can add this value as a noSelectValue property:

obj.noSelectValue = "null";

If no such value is selected, the empty string is used.

Special classes

Every <option> element generated by the plugin has class .dynamic-select-option

Every enabled <select> element (i.e. the element you can select from) has class .dynamic-select-enabled

The most recent enabled <select> element has also class .dynamic-select-active in addition.

License

Copyright (c) 2013 Peter Jezik under the MIT License