Я недавно начал изучать Javascript и HTML. У меня возникла проблема, когда мне нужно извлечь некоторые состояния из файла Json и заполнить их в раскрывающемся меню в соответствии со страной, выбранной из другого раскрывающегося меню.
Я думаю, что я почти закончил, но я застрял в той части, где я перебираю список и добавляю состояния в выпадающее меню.
Вот мой код.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>countries and state</title>
</head>
<body>
<label for="dropdown1">Country</label>
<select name="Country" onchange="getstate()" id="dropdown1">
<option value="Countries">--select country--</option>
<option value="India">India</option>
<option value="Germany">Germany</option>
<option value="USA">USA</option>
</select>
<br>
<label for="dropdown2">States</label>
<select name="states" id="dropdown2"><option value="states">--select state--</option>
</select>
</body>
<script>
function getstate(){
var country=document.getElementById('dropdown1').value;
console.log(country);
var xhr = new XMLHttpRequest(); // 1.Create request object
var url="http://127.0.0.1:5500/states.json"
xhr.open('GET', url); // 2.Open the URL
xhr.onload = ()=> { // 3.Mention code to run when response is received
console.log("The response from server is "+xhr.responseText);
var dataObjFromString=JSON.parse(xhr.responseText);
console.log(country,dataObjFromString[country]);
for(let i in dataObjFromString[country]){
state1=dataObjFromString[country][i].state
document.getElementById('dropdown2').value=state1
console.log(state1);
}
};
xhr.send(); // 4.Send the Request
};
</script>
</html>
Мой файл Json
{
"India":[{"state":"Kerala"}
,{"state":"Maharashtra"}
,{"state":"Tamilnadu"}],
"USA":[{"state":"Florida"},
{"state":"California"},{"state":"NewMexico"}
],
"Germany":[{"state":"Berlin"},{"state":"Hamburg"},{"state":"Bavaria"}]
}
Итак, ожидаемый результат -
Если я выберу Германию в первом раскрывающемся меню, во втором раскрывающемся меню должны быть указаны штаты Берлин, Гамбург и Бавария.
И также для других стран.
Я застрял на линии
document.getElementById ( 'dropdown2'). Значение = State1
Может кто-нибудь помочь мне с этим?