![Dependent Controls Library Dependent Controls Library](https://i3.wp.com/previews.customer.envatousercontent.com/files/354421861/preview.jpg?w=1200&resize=1200,0&ssl=1)
Dependent Controls Library
Dependent Controls is a library for making dependent drop-downs shortly and simply. It is written in pure ES6 JavaScript / TypeScript and doesn’t have any dependencies. The library helps SELECTs, radio buttons, and another customized HTML. Any CSS framework can be utilized for styling.
![Dependent Controls Library 3 ywAAAAAAQABAAACAUwAOw==](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==)
General Features
- The library helps SELECT drop-downs, radio buttons, and any customized HTML…
- Any CSS framework or customized CSS can be utilized for styling.
- The library is written in trendy ES6 + TypeScript; no dependencies are required.
- It has three information supply choices: one JSON file, a direct JavaScript object, or a customized perform that maximizes flexibility and permits to carry out AJAX requests.
- There is native storage, session storage, and cookies help.
- Deep hyperlinks help.
- Extensive documentation is included.
- It’s potential to have any variety of controls on the identical web page.
- The consumer finally defines all look & really feel of the web page; The library has minimal CSS types.
![Dependent Controls Library 3 ywAAAAAAQABAAACAUwAOw==](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==)
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
![Dependent Controls Library 3 ywAAAAAAQABAAACAUwAOw==](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==)
Data Sources
The library helps three foremost information sources:
- Single JSON file. In this case, all information is positioned inside a single JSON file, which is loaded as soon as on web page load.
- Javascript object. This information supply is the best one. Just create a JavaScript object and move it to the library by way of the dataSource property.
- Custom perform. The customized perform permits to use any logic and, for instance, deliver information from the server-side (by way of AJAX requests).
![Dependent Controls Library 3 ywAAAAAAQABAAACAUwAOw==](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==)
Storage & Deep Links
The library helps storage to save lots of the present state and restore it after web page refresh or when the again button is pressed.
- Local storage – that is persistent storage that retains information even when the consumer closes the browser.
- Session storage – it is going to be cleared when the browser session is over, usually when the consumer closes the browser.
- Cookies – in contrast to native and session storage, cookie values can be utilized on the server too. It’s additionally potential to outline cookies’ expiration date.
- Deep Links – particular hyperlinks that ship customers immediately into the predefined drop-down choice state.
![Dependent Controls Library 3 ywAAAAAAQABAAACAUwAOw==](data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==)
Callbacks & APIs
The library has numerous callback perform which may be used to use the customized logic:
- onSubmit.
- onReset.
- onChangeStart.
- onChangeEnd.
- onDisableControl.
- onEnableControl.