Dependent Controls Library

Pure CSS (No Frameworks) + AJAX Request Examples

This page demonstrates various depending control examples using pure CSS without frameworks and AJAX requests to a test server. All selected values will be restored after page refresh or back / forward button until the end of the browser session (using Session Storage).

Please note that this page should be opened only on the server, and it won't work on file:/// protocol because of the CORS.

Dependent Dropdowns # 1

This example shows drop-downs in a vertical layout.

Dependent Radio Buttons # 2

This example shows dependent radio buttons in a vertical layout.

Dependent Switches # 3

This example shows dependent switches in a horizontal layout.

Dependent DataLists # 4

Datalists allow you to create a group of <option>s that can be accessed (and autocompleted) from within an <input>. These are similar to <select> elements, but come with more menu styling limitations and differences. While most browsers and operating systems include some support for <datalist> elements, their styling is inconsistent at best. Learn more about support for datalist elements.

Mixed Controls # 5

This example shows various dependent controls types.