Minimal Cascading Dropdown Menu In Pure JS – dependent-selects

Preview:

Description:

dependent-selects is a minimal, unobtrusive JavaScript library for creating cascading drop-down menus.

It automatically populates child select depending on the value you previously selected in the parent select.

How to use it:

Create a select element, specify the target child select using the data-child-id attribute, and specify the dependent options separated by ‘|’.

<select name="parent" id="id_parent" data-child-id="id_child" class="dependent-selects__parent">
  <option value="">--------</option>
  <option value="one" data-child-options="1|#2|#3">JavaScript</option>
  <option value="two" data-child-options="4|#CSS|#6">HTML</option>
</select>
<select name="child" id="id_child" class="dependent-selects__child">
  <option value="">--------</option>
  <option value="1">jQuery</option>
  <option value="2">Angular</option>
  <option value="3">React</option>
  <option value="4">HTML5</option>
  <option value="CSS">CSS</option>
  <option value="6">CSS3</option>
</select>

Then include the JavaScript library ‘dependent-selects.js’ at the end of the document. Done.

<script defer src="dependent-selects.js"></script>