How to Show subcategory list as per category select in dropdown select box using Javascript?

Show subcategory list as per category select in dropdown select box Javascript

File name : index.php

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var subcategory = {
Mobile: ["Nokia","Redmi","Samsung"],
Clothes: ["Shirt","Pant","T-shirt"]
}
function makeSubmenu(value) {
if(value.length==0) document.getElementById("categorySelect").innerHTML = "<option></option>";
else {
var citiesOptions = "";
for(categoryId in subcategory[value]) {
citiesOptions+="<option>"+subcategory[value][categoryId]+"</option>";
}
document.getElementById("categorySelect").innerHTML = citiesOptions;
}
}
function displaySelected() { var country = document.getElementById("category").value;
var city = document.getElementById("categorySelect").value;
alert(country+"\n"+city);
}
function resetSelection() {
document.getElementById("category").selectedIndex = 0;
document.getElementById("categorySelect").selectedIndex = 0;
}
</script>
</head>
<body onload="resetSelection()">
<select id="category" size="1" onchange="makeSubmenu(this.value)">
<option value="" disabled selected>Choose Category</option>
<option>Mobile</option>
<option>Clothes</option>
</select>
<select id="categorySelect" size="1" >
<option value="" disabled selected>Choose Subcategory</option>
<option></option>
</select>
<button onclick="displaySelected()">show selected</button>
</body>
</html>

Output :-

Previous Next

Review & Rating

0.0 / 5

0 Review

5

(0)

4

(0)

3

(0)

2

(0)

1

(0)