Question

如何使用JavaScript或jQuery轻松地将此多维链式country-city 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>

请帮忙。

Answer 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>

如何使用javascript或jquery轻松解析多维链式CountriesToCities.json到下拉列表？

1 个答案: