Hi everyone, I am new to JavaScript and I am seeking assistance with a dropdown issue I am facing. Currently, I am using a JavaScript code for multi-level dropdowns. However, when I use it for multiple dropdowns, the second dropdown follows the sequence of the first dropdown's selection.
The challenge is that each multi-level dropdown should be unique. For example:
Dropdown A: 1st level: first option 2nd level: first option content dropdown
Dropdown B: 1st level: second option 2nd level: first option content dropdown
It should ideally look like this:
Dropdown A: 1st level: first option 2nd level: first option content dropdown
Dropdown B: 1st level: second option 2nd level: second option content dropdown
Below is the JavaScript code I am currently using:
$(document).ready(function() {
$('#multi-dropdown').bind('change', function() {
var elements = $('div.container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if something is selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
$('.second-level-select').bind('change', function() {
var elements = $('div.second-level-container').children().hide(); // hide all the elements
var value = $(this).val();
if (value.length) { // if something is selected
elements.filter('.' + value).show(); // show the ones we want
}
}).trigger('change');
});
You can access the code snippet here: https://jsfiddle.net/aew2960d/