Dependent Controls

Features

Dependent Controls is a library for making dependent drop-downs quickly and easily. It is written in pure ES6 JavaScript 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.

Multiple controls

The library supports SELECT drop-down lists, radio buttons, switches, data lists, and more.
CSS Frameworks

Any CSS framework or custom CSS can be used for styling. No limitations.
Modern JavaScript

The library is written in modern ES6 + TypeScript; no dependencies are required.
Data Sources

It has three data source options: JSON file, a direct JavaScript object, or a custom function for AJAX requests.
Storage Solutions

There is local storage, session storage, cookies, and deep links support.
Documentation

Great and extensive documentation is included.
Multiple Forms

It's possible to have any number of forms on the same page.
Look & Feel

The user ultimately defines all look & feel of the page; The library has minimal CSS styles.

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.

Storage

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.

Dependent Controls Library

Dependent Controls is a library for making dependent drop-downs quickly and easily. It works with controls when one list of data depends on another list. The child drop-down will be shown only when the value in the parent drop-down is selected.

Example Pages

Features

Data Sources

Storage

Callback Functions