Dependent Controls Library

Dependent Controls is a library for making dependent drop-downs quickly and easily. It is written in pure ES6 JavaScript / TypeScript and doesn’t have any dependencies. The library supports SELECTs, radio buttons, and any other custom HTML. Any CSS framework can be used for styling.

General Features

• The library supports SELECT drop-downs, radio buttons, and any custom HTML…
• Any CSS framework or custom CSS can be used for styling.
• The library is written in modern ES6 + TypeScript; no dependencies are required.
• It has three data source options: one JSON file, a direct JavaScript object, or a custom function that maximizes flexibility and allows to perform AJAX requests.
• There is local storage, session storage, and cookies support.
• Deep links support.
• Extensive documentation is included.
• It’s possible to have any number of controls on the same page.
• The user ultimately defines all look & feel of the page; The library has minimal CSS styles.

Examples

• Bootstrap CSS Framework DropDown Examples
• Bootstrap CSS Framework Radio Buttons & Switches
• Bootstrap CSS Framework Mixed Controls
• Tailwind CSS Framework DropDown Examples
• Tailwind CSS Framework Radio Buttons & Switches
• Tailwind CSS Framework Mixed Controls
• Bulma CSS Framework Examples
• Foundation CSS Framework Examples
• Pure CSS & AJAX Request
• AJAX example with five nesting levels
• SELECT with <optgroup>
• Drop-Down with Deep Link

Data Sources

The library supports three main data sources:

• Single JSON file. In this case, all data is placed within a single JSON file, which is loaded once on page load.
• Javascript object. This data source is the simplest one. Just create a JavaScript object and pass it to the library via the dataSource property.
• Custom function. The custom function allows to apply any logic and, for example, bring data from the server-side (via AJAX requests).

Storage & Deep Links

The library supports storage to save the current state and restore it after page refresh or when the back button is pressed.

• Local storage – this is persistent storage that keeps data even if the user closes the browser.
• Session storage – it will be cleared when the browser session is over, typically when the user closes the browser.
• Cookies – unlike local and session storage, cookie values can be used on the server too. It’s also possible to define cookies’ expiration date.
• Deep Links – special links that send users directly into the predefined drop-down selection state.

Callbacks & APIs

The library has various callback function that may be used to apply the custom logic:

• onSubmit.
• onReset.
• onChangeStart.
• onChangeEnd.
• onDisableControl.
• onEnableControl.