How to make dependable dropdown with jquery - html

Question

I pre-populated select tag tags with option values coming from PHP variables, and the HTML looks like this:
<!-- Type -->
<select id="d1">
<option type="colours" value="Colours">Colours</option>
<option type="fruit" value="Fruit">Fruit</option>
</select>
<!-- Group -->
<select id="d2">
<option type="colours_dark" subtype="dark" value="Dark">Dark</option>
<option type="colours_light" subtype="light" value="Light">Light</option>
<option type="fruit_ripe" value="Ripe">Ripe</option>
<option type="fruit_rotten" value="Rotten">Rotten</option>
</select>
<!-- Items -->
<select id="d3" style="display: none;">
<option value="">Choose a color</option>
<option type="colours_dark" value="Black">Black</option>
<option type="colours_dark" value="Brown">Brown</option>
<option type="colours_dark" value="Grey">Grey</option>
<option type="colours_light" value="Red">Red</option>
<option type="colours_light" value="Green">Green</option>
<option type="colours_light" value="Blue">Blue</option>
<option type="fruit_ripe" value="Banana">Banana</option>
<option type="fruit_ripe" value="Apple">Apple</option>
<option type="fruit_ripe" value="Orange">Orange</option>
<option type="fruit_rotten" value="Pear">Pear</option>
<option type="fruit_rotten" value="Peach">Peach</option>
<option type="fruit_rotten" value="Mango">Mango</option>
</select>
Initially, I don't want the third dropdown to show because the values will depend on the second dropdown, so I added the following to my jQuery snippet:
var dropDown1Selected = dropDown1.find('option').filter(':selected').val();
if(dropDown3.find('option').filter(':selected').val() == '') {
dropDown3.hide();
}
Based on my HTML, how do I make the options of dropdown 2 show depending on dropdown 1, and then have dropdown 3 showing depending on dropdown 3?
Eg: If I select fruit from dropdown 1, dropdown 2 should only show Ripe, and Rotten. And if I choose Ripe, then dropdown 3 should only show Apple and Orange.
I tried the following in my jQuery snippet, but am struggling to change the dropdown options:
$('#d1').on('change', function(e) {
var val = this.value;
// check if val exists in d2 options
$("#d2 option").filter(function() {
});
}).change();

Answer 1

Hope this work for you, I make dropdown 3 filtered with dropdown 2 so you don't need to hide it
$(document).ready(function () {
filterOption("d1", "d2");
filterOption("d2", "d3");
})
$('#d1').on('change', function (e) {
filterOption("d1", "d2");
filterOption("d2", "d3");
})
$('#d2').on('change', function (e) {
filterOption("d2", "d3");
})
function filterOption(parent, child) {
var parent = $(`#${parent} :selected`).attr('type');
$(`#${child} option`).each(function () {
if ($(this).val() == "" || $(this).attr('type').includes(parent)) {
$(this).show();
}
else {
$(this).hide();
}
})
$(`#${child}`).val($(`#${child} option:visible:first`).val());
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Type -->
<select id="d1">
<option type="colours" value="Colours">Colours</option>
<option type="fruit" value="Fruit">Fruit</option>
</select>
<!-- Group -->
<select id="d2">
<option type="colours_dark" subtype="dark" value="Dark">Dark</option>
<option type="colours_light" subtype="light" value="Light">Light</option>
<option type="fruit_ripe" value="Ripe">Ripe</option>
<option type="fruit_rotten" value="Rotten">Rotten</option>
</select>
<!-- Items -->
<select id="d3">
<option value="">Choose a color</option>
<option type="colours_dark" value="Black">Black</option>
<option type="colours_dark" value="Brown">Brown</option>
<option type="colours_dark" value="Grey">Grey</option>
<option type="colours_light" value="Red">Red</option>
<option type="colours_light" value="Green">Green</option>
<option type="colours_light" value="Blue">Blue</option>
<option type="fruit_ripe" value="Banana">Banana</option>
<option type="fruit_ripe" value="Apple">Apple</option>
<option type="fruit_ripe" value="Orange">Orange</option>
<option type="fruit_rotten" value="Pear">Pear</option>
<option type="fruit_rotten" value="Peach">Peach</option>
<option type="fruit_rotten" value="Mango">Mango</option>
</select>