Question

我最近开始学习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'）。value = state1

有人可以帮我吗？

如何将列表值填充到下拉菜单中？

0 个答案: