如何使用 javascript 或 jquery 轻松地将多维链接的 CountryToCities.json 解析为下拉列表？答案

【问题标题】：How to parse multidimensional chained CountriesToCities.json to dropdown list easily using javascript or jquery?如何使用 javascript 或 jquery 轻松地将多维链接的 CountryToCities.json 解析为下拉列表？
【发布时间】：2015-07-20 10:42:16
【问题描述】：

如何使用 JavaScript 或 jQuery 轻松地将这个多维链接的国家城市 JSON 解析为下拉列表？

这里有点意思

"North Korea":["Pyongyang",""],"Vatican City":[""],"Antarctica":["Antarctica"],"Bermuda":["Hamilton","Saint George","Somerset"],"CuraÃ§ao":["Willemstad","Vredeberg","Emmastad"],"Ecuador":["Quito","Pichincha","Guayas","Guayaquil","Ibarra","Riobamba","Ambato","Otavalo","Guamote","Libertad","Huaquillas","Olmedo","DurÃ¡n","Florida","Machala","Loja","Manta","Nabon","Milagro","TulcÃ¡n","Atuntaqui","Daule","Pasaje","Playas","San Miguel","Puerto Francisco de Orellana","Loreto","Montecristi","Hacienda Santa Catalina","Zamora","Vinces","Quevedo","Hacienda Duran","Bahia de Caraquez","Salinas","Hacienda Ibarra","Hacienda Bolivia","El Naranjal","Banos"],"South Africa":["Johannesburg","Sandton", ... etc

http://www.3dz.com/media/job/countriesToCities.json

我尝试过类似的东西

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
   if(xhr.readyState === 4) {
    var countriesToCities = JSON.parse(xhr.responseText) ;

   var statusHTML= '<select class ="bulleted">';
      for (var i = 0; i < countriesToCities.length - 1; i+=1) {
    {
        statusHTML +='<option>';

    statusHTML+= countriesToCities[i].name; 
    statusHTML+= '</option>';
}
statusHTML+='</select>';
document.getElementById('countriesToCitiesList').innerHTML = statusHTML;
}
};
xhr.open('GET', 'http://www.3dz.com/media/job/countriesToCities.json');
xhr.send();

输出应该是这样的：

 <select>
   <option value="country1">country1</option>
   <option value="country2">country2</option>
   <option value="country n">country n</option>
 </select>

对于国家 1

 <select>
   <option value=" city 1">city 1</option>
   <option value="city 2">city 2</option>
   <option value="city n">city n</option>
 </select>

请帮忙。

【问题讨论】：

你的代码会发生什么？

标签： javascript php jquery json multidimensional-array

【解决方案1】：

您的代码几乎没有问题。以下代码可以正常工作。您需要先遍历所有国家/地区，然后遍历每个国家/地区的首都

JS 代码

var countriesToCities = JSON.parse(xhr.responseText) ;
for (var i in countriesToCities) {
    var statusHTML= '<select class ="bulleted">';
    for(var j in countriesToCities[i])
    {
        statusHTML +='<option>';
        statusHTML+= countriesToCities[i][j]; 
        statusHTML+= '</option>';
    }

    statusHTML+='</select>';
    var div = document.getElementById('countriesToCitiesList');
    div.innerHTML = div.innerHTML + statusHTML;
}

HTML 代码

<div id="countriesToCitiesList"></div>

【讨论】：

跨域请求存在问题。要解决此问题，您需要添加请求标头以允许跨域
将此行添加到处理 ajax 请求的 php 文件中。