You can modify your display() function like this:
let selectedCountryIndex=document.getElementById("countySel").selectedIndex;
let selectedStateIndex=document.getElementById("stateSel").selectedIndex;
let selectedDistrictIndex=document.getElementById("districtSel").selectedIndex;
let opt1 = document.getElementById("countySel").options[selectedCountryIndex].value;
let opt2 = document.getElementById("stateSel").options[selectedStateIndex].value;
let opt3 = document.getElementById("districtSel").options[selectedDistrictIndex].value;
How to display country state city names. The result that I found is displaying only country name in rest two fields.
<html>
<head>
<title>dispaly country state district/title>
<link rel="stylesheet" href="coun.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script>
var stateObject = {
"India": { "AndhraPradensh": ["Guntur", "ananthapur","kurnool","krishna","kadapa"],
"Kerala": ["Thiruvananthapuram", "Palakkad"],
"Goa": ["North Goa", "South Goa"],
},
"The United States of America": {
"califonia": ["California’s 34th congressional district", "California’s 38th congressional district"],
"Florida": ["Florida"]
}, "Canada": {
"Alberta": ["Acadia", "Bighorn"],
"Columbia": ["Washington DC"]
},
}
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;
districtSel.length = 1;
if (this.selectedIndex < 1) return;
for (var state in stateObject[this.value])
{
stateSel.options[stateSel.options.length] = new Option(state, state);
}
}
countySel.onchange();
stateSel.onchange = function ()
{
districtSel.length = 1;
if (this.selectedIndex < 1) return;
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]);
}
}
}
</script>
Function is not working properly. The Problem is which user is selected is not displaying or stored correctly.
<script LANGUAGE="JavaScript" type="text/javascript">
function display()
{
var j=document.getElementById("countySel").selectedIndex;
var k=document.getElementsByTagName("option")[j].value;
var l=document.getElementById("stateSel").selectedIndex;
var m=document.getElementsByTagName("option")[l].value;
var n=document.getElementById("districtSel").selectedIndex;
var o=document.getElementsByTagName("option")[n].value;
var siva=document.getElementById("sai");
var displaysetting=siva.style.display;
if (typeof(Storage) !== "undefined")
{
localStorage.setItem('country',k)
localStorage.setItem('state',m)
localStorage.setItem('district',o)
if(displaysetting == "block")
{
siva.style.display='none';
inputfields.style.display='block';
document.getElementById("country1").innerHTML=localStorage.getItem('country');
document.getElementById("state1").innerHTML=localStorage.getItem('state');
document.getElementById("district1").innerHTML=localStorage.getItem('district');
}
else
{
siva.style.display='block';
}
}
else
{
document.getElementById("name1").innerHTML = "Sorry, your browser does not support Web Storage...";
}
}
</script>
</head>
<body>
<form class="container" id="sai" style="display: block;" >
<div class="row">
<div class="form-group col-4">
<label>Select Country:</label>
<select name="state" id="countySel" class="form-control" size="1">
<option value="" selected="selected" >Select Country</option>
</select>
</div>
<div class="form-group col-4">
<label>Select State:</label>
<select name="country" id="stateSel" class="form-control" size="1">
<option value="" selected="selected" >Please select Country first</option>
</select>
</div>
<div class="form-group col-4">
<label>Select District:</label>
<select name="district" id="districtSel" class="form-control" size="1">
<option value="" selected="selected">Please select State first</option>
</select>
</div>
<div class="form-group">
<button class="btn btn-secondary" type="submit" value="submit" onclick="display()" style="width: 100px;">SUBMIT</button>
</div>
</div>
</form>
<div class="container" id="inputfields" style="margin-top: 15px; display: none;">
<div class="row">
<div class="col-6">
<div id="img" style="width: 350px; height: 350px;">
</div>
</div>
<div class="col-6">
<div> COUNTRY: <p id="country1"></p></div>
<div> STATE: <p id="state1"></p></div>
<div> DISTRICT: <p id="district1"></p></div>
</div>
</div>
</div>
</body>
I tried a lot but i didn’t found where i done mistake. Can any please sort out this problem.
State your question in the question body itself. Not in the title. Second, please do not use uppercase letters when trying to emphasize something. Third, reproduce your current situation with a working code snippet. Do not just paste a bunch of code.
