從下拉列表中選擇元素時，從json文件加載數據

Question

創建一個應用程序以從服務器上托管的JSON文件加載地區，並根據下拉框中提供的選定省份列出地區。 首先，使用以下內容創建一個表單。

合適的標題
包含斯里蘭卡所有省份的下拉列表。 （使用數組存儲省份，第一個元素為“請選擇”，其余為省份）
加載分區的div

最初，下拉列表被選擇為“請選擇”。 當您從下拉列表中選擇一個省時，與該省相關的所有地區將被加載並顯示在div中，並帶有項目符號（提示： <ul><li></li></ul> ）。地區列表應為在具有相關省名的JSON文件中。

HTML代碼

<html>
<head>
    <title></title>
</head>

<body>
    <form action="#" method="post">
        <table>
            <tr>
                <td>Select a province</td>
                <td>
                    <select id="myselect" onchange="change_myselect(this.value)">
                        <option value="1">Select province</option>
                        <option value="2">Western</option>



                    </select>
                </td>               
            </tr>
        </table>
    </form>


    <p id="demo"></p>

<script>
function change_myselect(sel) {
  var obj, dbParam, xmlhttp, myObj, x, txt = "";
  obj = { table: sel, limit: 20 };
  dbParam = JSON.stringify(obj);
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myObj = JSON.parse(this.responseText);
      txt += "<table border='1'>"
      for (x in myObj) {
        txt += "<tr><td>" + myObj[x].name + "</td></tr>";
      }
      txt += "</table>"    
      document.getElementById("demo").innerHTML = txt;
      }
    };
  xmlhttp.open("POST", "districts.json", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("x=" + dbParam);
}
</script>



</body>

</html>

JSON文件

{
    "province":"Western",
    "name":"Colombo",
    "name":"Gampaha",
    "name":"Kalutara"

}

我嘗試用從下拉列表中選擇“ western”時應顯示的數據創建一個簡單的json文件。 運行代碼時我沒有得到任何數據:(

我在桌子上拿這個

undefined
undefined

Answer 1

在下面的代碼中替換使用x.name代替myObj[x].name

function change_myselect(sel) {
  var obj, dbParam, xmlhttp, myObj, x, txt = "";
  obj = { table: sel, limit: 20 };
  dbParam = JSON.stringify(obj);
  xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      myObj = JSON.parse(this.responseText);
      txt += "<table border='1'>"
      for (x in myObj) {
        txt += "<tr><td>" + x.name + "</td></tr>";
      }
      txt += "</table>"    
      document.getElementById("demo").innerHTML = txt;
      }
    };
  xmlhttp.open("POST", "districts.json", true);
  xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
  xmlhttp.send("x=" + dbParam);
}

JSON文件必須像

[{
    "name":"Colombo"  
},
{
"name":"Gampaha"
}]

Answer 2

我將您的json更改為以下格式：

{ 
    "provinces" :[
    { "province":"Western", "name":"Colombo" },
    { "province":"Western", "name":"Gampaha" },
    { "province":"Western", "name":"Kalutara"}
    ]
}

您可以使用在線服務（例如https://jsonlint.com/）來驗證json。

和你的循環如下：

 for (x in myObj.provinces) {
    txt += "<tr><td>" + myObj.provinces[x].name + "</td></tr>";
  }

從下拉列表中選擇元素時，從json文件加載數據

問題描述

2 個解決方案

解決方案1
0 2019-09-03 07:06:06

解決方案2
0 已采納 2019-09-03 07:18:55

從下拉列表中選擇元素時，從json文件加載數據

問題描述

2 個解決方案

解決方案1 0 2019-09-03 07:06:06

解決方案2 0 已采納 2019-09-03 07:18:55

解決方案1
0 2019-09-03 07:06:06

解決方案2
0 已采納 2019-09-03 07:18:55