Hello guys, in this tutorials you’ll learn how to code a HTML program to display the capital of a state, it is very easy, just peak these code and paste in your daily code editor as well in text editor keep it separate html, css and javascript file.
HTML Code
<html> <head> <meta charset="utf-8"> <title>viewtechindia.com</title> </head> <body> <form class="form" name="myform" id="myForm"> <lable class="label">Select Country:</lable> <select class="select" name="state" id="countySel" size="1"> <option value="" selected="selected">Select Country</option> </select> <br> <br> <lable class="label">Select State:</lable> <select class="select" name="countrya" id="stateSel" size="1"> <option class="option" value="" selected="selected">Please select Country first</option> </select> <br> <br> <lable class="label">Select District: </lable><select class="select" name="district" id="districtSel" size="1"> <option value="" selected="selected">Please select State first</option> </select><br> <input class="submit-button" type="submit"> </form> </body> </html>
CSS Code
body {
font-family: system-ui;
background: #f06d06;
color: white;
text-align: center;
}
.form {
border:solid 1px #ffffff;
padding:40px;
text-align:left;
display:block;
margin:65px auto 0px auto;
max-width:400px;
border-radius:5px; background:rbga(256,256,256, 0.5);
}
.select {
height:35px;
border-radius:5px;
min-width:250px;
padding:7px 7px;
}
.label {
min-width:130px;
display:inline-block;
}
.submit-button {
height:35px;
border-radius:5px;
min-width:250px;
padding:7px 7px;
border:none;
background:#f2f2f2;
margin-left:130px;
margin-top:25px
}
JavaScript
var stateObject = {
"India": { "Delhi": ["new Delhi", "North Delhi"],
"Kerala": ["Thiruvananthapuram", "Palakkad"],
"Goa": ["North Goa", "South Goa"],
},
"Australia": {
"South Australia": ["Dunstan", "Mitchell"],
"Victoria": ["Altona", "Euroa"]
}, "Canada": {
"Alberta": ["Acadia", "Bighorn"],
"Columbia": ["Washington", ""]
},
}
window.onload = function () {
var countySel = document.getElementById("countySel"),
stateSel = document.getElementById("stateSel"),
districtSel = document.getElementById("districtSel");
for (var country in stateObject) {
countySel.options[countySel.options.length] = new Option(country, country);
}
countySel.onchange = function () {
stateSel.length = 1; // remove all options bar first
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var state in stateObject[this.value]) {
stateSel.options[stateSel.options.length] = new Option(state, state);
}
}
countySel.onchange(); // reset in case page is reloaded
stateSel.onchange = function () {
districtSel.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var district = stateObject[countySel.value][this.value];
for (var i = 0; i < district.length; i++) {
districtSel.options[districtSel.options.length] = new Option(district[i], district[i]);
}
}
}
