I have implemented a select box where selecting a value in the main select box "Domains" will reveal another select box called "Types" such as Diatoms or Flagellates. I have successfully achieved this functionality, but now I am facing an issue with resetting the selected item in the newly appeared select box back to the default option of the main select box. For example, if I select "Diatoms" in the Domains select box and then choose an item within Diatoms category, and then switch to other items in Domains causing a different select box to appear, the previously selected Diatoms item remains selected. I want to revert it back to the default first option instead. Here is my code:
I have attempted using 'selectedIndex', 0 to reset the selected item, but it did not work.
HTML
<ul class="inline_list">
<li class="Domains">
<select>
<option selected disabled hidden>Domains</option>
<option value="Diatoms">Diatoms</option>
<option value="Flagellates">Flagellates</option>
<option value="Dinoflagellates">Dinoflagellates</option>
<option value="Ciliates">Ciliates</option>
<option value="Coccolithophore">Coccolithophore</option>
<option value="Miscellaneous">Miscellaneous</option>
<option value="Other_plankton">Others</option>
</select>
</li>
<li class="Diatoms domains_types">
<select>
<option selected disabled hidden>Types</option>
<option value="Asterionellopsis">Asterionellopsis</option>
<option value="Bacillaria">Bacillaria</option>
</select>
</li>
<li class="Flagellates domains_types">
<select>
<option selected disabled hidden>Types</option>
<option value="amoeba">amoeba</option>
<option value="Chrysochromulina">Chrysochromulina</option>
</select>
</li>
<script src="js/select_box.js"></script>
</ul>
CSS
.domains_types{
display: none;
}
Jquery
$(document).ready(function(){
$('.Domains').ready(function(){
$('select').change(function(){
$("select option:selected").each(function(){
if($(this).attr("value")=="Diatoms"){
$('.domains_types').hide();
$('.Diatoms').css('display','inline-block');
}
if($(this).attr("value")=="Flagellates"){
$('.domains_types').hide();
$('.Flagellates').css('display','inline-block');
}
});
}).change();
});
});