Как отобразить названия городов страны-государства. В результате я нашел только название страны в остальных двух полях.
<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/popper.js@1.16.0/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>
Функция не работает должным образом. Проблема в том, что выбранный пользователь не отображается или хранится правильно.
<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>
Я много пробовал, но не нашел, где сделал ошибку. Может ли кто-нибудь, пожалуйста, разобраться в этой проблеме.
