Dependent-list

Dependent list demo one

parent option 1 parent option 2 parent option 3 child 1, parent 1 child 2, parent 1 child 3, parent 2 child 4, parent 2 child 5, parent 3 child 6, parent 3

Code

<select class="demo-2" id="parent-select-demo-2">
	<option value="group-1">parent option 1</option>
	<option value="group-2">parent option 2</option>
	<option value="group-3">parent option 3</option>
</select>

<select class="demo-2 dependent-list" id="child-select-1-demo-2" data-depends="#parent-select-demo-2">
	<option value="group-1" data-group="group-1">child 1, parent 1</option>
	<option value="group-2" data-group="group-1">child 2, parent 1</option>

	<option value="group-3" data-group="group-2">child 3, parent 2</option>
	<option value="group-4" data-group="group-2">child 4, parent 2</option>

	<option value="group-5" data-group="group-3">child 5, parent 3</option>
	<option value="group-6" data-group="group-3">child 6, parent 3</option>
</select>
			

Dependent list demo two

parent option 1 parent option 2 parent option 3 child 1, parent 1 child 2, parent 1 child 3, parent 2 child 4, parent 2 child 5, parent 3 child 6, parent 3 child 1, parent 1 child 2, parent 1 child 3, parent 2 child 4, parent 2 child 5, parent 3 child 6, parent 3

Code

<select class="demo-2" id="parent-select-demo-2" size="5">
	<option value="group-1">parent option 1</option>
	<option value="group-2">parent option 2</option>
	<option value="group-3">parent option 3</option>
</select>

<select class="demo-2 dependent-list" id="child-select-1-demo-2" size="5" data-depends="#parent-select-demo-2">
	<option value="group-1" data-group="group-1">child 1, parent 1</option>
	<option value="group-2" data-group="group-1">child 2, parent 1</option>

	<option value="group-3" data-group="group-2">child 3, parent 2</option>
	<option value="group-4" data-group="group-2">child 4, parent 2</option>

	<option value="group-5" data-group="group-3">child 5, parent 3</option>
	<option value="group-6" data-group="group-3">child 6, parent 3</option>
</select>

<select class="demo-2 dependent-list" id="child-select-2-demo-2" size="5" data-depends="#child-select-1-demo-2">
	<option value="group-1" data-group="group-1">child 1, parent 1</option>
	<option value="group-2" data-group="group-1">child 2, parent 1</option>

	<option value="group-3" data-group="group-2">child 3, parent 2</option>
	<option value="group-4" data-group="group-2">child 4, parent 2</option>

	<option value="group-5" data-group="group-3">child 5, parent 3</option>
	<option value="group-6" data-group="group-3">child 6, parent 3</option>
</select>