<!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>