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.
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);
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.)
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 ---"];
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.
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.
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.
Copyright (c) 2013 Peter Jezik under the MIT License