Multiple dropdown menu filter in html - html

Question

Assume I have two dropdown Menu, is it possible to filter menu b by using HTML code only?
If not, which method can be apply for this case with simply code.
menu a with A B
menu b with A1 A2 B1 B2

Answer 1

You can do this with the help of Javascript.
Suppose you have one dropdown with some values as "Colours, Shapes, Names" with html as:
Dropdown1:
<select id="ddl">
<option value=""></option>
<option value="Colours">Colours</option>
<option value="Shapes">Shapes</option>
<option value="Names">Names</option>
</select>
And you want to filter another one based on first dropdown selected value
Dropdown2:
<select id="ddl2">
</select>
Then Apply below Javascript code:
Filter out:
function configureDropDownLists(ddl1,ddl2) {
var colours = new Array('Black', 'White', 'Blue');
var shapes = new Array('Square', 'Circle', 'Triangle');
var names = new Array('John', 'David', 'Sarah');
switch (ddl1.value) {
case 'Colours':
ddl2.options.length = 0;
for (i = 0; i < colours.length; i++) {
createOption(ddl2, colours[i], colours[i]);
}
break;
case 'Shapes':
ddl2.options.length = 0;
for (i = 0; i < shapes.length; i++) {
createOption(ddl2, shapes[i], shapes[i]);
}
break;
case 'Names':
ddl2.options.length = 0;
for (i = 0; i < names.length; i++) {
createOption(ddl2, names[i], names[i]);
}
break;
default:
ddl2.options.length = 0;
}
}
And create option runtime for second dropdown:
function createOption(selBox, text, value) {
var opt = document.createElement('option');
opt.value = value;
opt.text = text;
selBox.options.add(opt);
}
Apply:
onchange="configureDropDownLists(this,document.getElementById('ddl2'))" in first dropdown, as:
<select id="ddl" onchange="configureDropDownLists(this,document.getElementById('ddl2'))">
<option value=""></option>
<option value="Colours">Colours</option>
<option value="Shapes">Shapes</option>
<option value="Names">Names</option>
</select>
So dropdown 2 gets filter based on first selected value.
Please refer to fiddle for live demo
Hope this will help you :)