<!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <script type="text/javascript"> var citiesByState = { Odisha: ["Bhubaneswar","Puri","Cuttack"], Maharashtra: ["Mumbai","Pune","Nagpur"], Kerala: ["kochi","Kanpur"] } function makeSubmenu(value) { if(value.length==0) document.getElementById("citySelect").innerHTML = "<option></option>"; else { var citiesOptions = ""; for(cityId in citiesByState[value]) { citiesOptions+="<option>"+citiesByState[value][cityId]+"</option>"; } document.getElementById("citySelect").innerHTML = citiesOptions; } } function displaySelected() { var country = document.getElementById("countrySelect").value; var city = document.getElementById("citySelect").value; alert(country+"\n"+city); } function resetSelection() { document.getElementById("countrySelect").selectedIndex = 0; document.getElementById("citySelect").selectedIndex = 0; } </script> </head> <body onload="resetSelection()"> <select id="countrySelect" size="1" onchange="makeSubmenu(this.value)"> <option value="" disabled selected>Choose State</option> <option>Odisha</option> <option>Maharashtra</option> <option>Kerala</option> </select> <select id="citySelect" size="1" > <option value="" disabled selected>Choose City</option> <option></option> </select> <button onclick="displaySelected()">show selected</button> </body> </html>