I want to see just only the div that has the same id of the select option, and when I select another option the first div hide, and the new one appear. it must work with pure js not JQuery.. here is my code
/*css*/
.selectable{
display: none;
}
/*php file*/
<select name="" id="typeSwitcher" onchange="get_DVD_details();">
<option disabled>Type Switcher</option>
<option value="disc" id="">DVD-disc</option>
<option value="Furniture" id="">Furniture</option>
<option value="Book" id="">Book</option>
</select><br><br>
<!-- DVD -->
<div class="selectable DVD " id="disc">
<label> Size (MB) </label>
<input type="text" name="size" id="size"> <br><br>
<small>Please provide size in MB format.</small>
</div><br><br>
<div class="selectable" id="Furniture">
<!-- FURINTURE -->
<label> Height (CM) </label>
<input type="text" name="height" id="height"> <br><br>
<label> width (CM) </label>
<input type="text" name="width" id="width"> <br><br>
<label> Length (CM) </label>
<input type="text" name="length" id="length"> <br><br>
<small>Please provide dimensions in HxWxL format.</small>
</div><br><br>
<div class="selectable" id="Book">
<!-- BOOK -->
<label> Weight (KG) </label>
<input type="text" name="weight" id="weight"> <br><br>
<small>Please provide weight in Kg format.</small>
</div><br><br>
<script>
function get_DVD_details() {
var selectBox = document.getElementById("typeSwitcher");
var selectedValue = selectBox.options[selectBox.selectedIndex].value;
const a = selectedValue;
document.getElementsByClassName("selectable").style.display = "none";
document.getElementById(a).style.display = "block";
}
</script>