读取 JSON 数组并以 HTML 格式打印

Question

我已经开发了以下练习，我必须确保根据 JSON 文件向我显示与它对应的部门，到目前为止，我已经设法向我显示了他们选择的部门，但是我没有设法只向我展示与他们各自选择的每个部门相对应的城市。我的代码如下： enter image description here

数据 JSON

{ 
    "Amazonas": ["Leticia","El encanto","La Chorrera","La Pedrera","Miritiparaná","Puerto Alegría","Puerto Arica","Puerto Nariño","Puerto Santader"], 
    "Atlántico": ["Baranoa","Baranoa","Barranquilla","Campo de la Cruz","Candelaría","Galapa","San Juan de Acosta","Luruaco", "Malambo","Manatí","Palmar de Varela","Piojo","Polo Nuevo","Ponedera","Puerto Colombia","Repelón","Sabanagrande","Sabanalarga","Santa Lucía","Santo Tomás","Soledad","Suan","Tubara","Usiacurí"], 
    "Caquetá": ["Albania","Belén de los Andaquíes","Cartagena del Chaira","Curillo","El Doncello","El Paujil","Florencia","La Montañita","Milan","Morelia","Puerto Rico","San José de Fragua","San Vicente del Caguán","Solano","Solita","Valparaíso"], 
    "Cesar": ["Aguachica","Agustín Codazzi","Astrea","Becerril","Bosconia","Chimichagua","Chiriguaná","Curumaní","El Copey","El Paso","Gamarra","González","La Gloria","La Jagua","Ibirico","Manaure","Pailitas","Pelaya","Pueblo Bello","Río de Oro","Robles la Paz","San Alberto","San Diego","San Martín","Tamalameque","Valledupar"], 
    "Chocó": ["Acandi","Alto Baudo","Atrato","Bagado","Bahía Solano","Belén de bajirá","Bajo Baudo","Bojayá","Cantón de San Pablo","Carmen del Darién","Certeguí","Condoto","El Carmen","Istmina","Jurado","Litoral del San Juan","Lloró","Medio Atrato","Medio Baudo","Medio San Juan","Novita","Nuquí","Quibdó","Río Iro","Río Quito","Riosucio","San José del Palmar","Sipí","Tado","Unguía","Unión Panamericana"], 
    "Córdoba": ["Ayapel","Buenavista","Canalete","Cerete","Chima","Chinu","Ciénaga de Oro","Cotorra","La Apartada","Lorica","Los Córdobas","Momil","Moñitos","Montelibano","Montería","Planeta Rica","Pueblo Nuevo","Puerto Escondido","Puerto Libertador","Purísima","Sahagun","San Andrés","Sotavento","San Antero","San Bernardo Viento","San Carlos","San Pelayo","Tierralta","Tuchin","Valencia"], 
    "Guainía": ["Inírida","Barranco Minas","Cacahual","La Guadalupe","Mapiripana","Morichal","Pana Pana","Puerto Colombia","San Felipe"], 
    "Guaviare": ["Calamar","El Retorno","Miraflores","San José del Guaviare"], 
    "Huila": ["Acevedo","Agrado","Aipe","Algeciras","Altamira","Baraya","Campoalegre","Colombia","Elias","Garzón","Gigante","Guadalupe","Hobo","Íquira","Isnos","La Argentina","La Plata","Nataga","Neiva","Oporapa","Paicol","Palermo","Palestina","Pital","Pitalito","Rivera","Saladoblanco","San Agustín","Santa María","Suaza","Tarqui","Tello","Teruel","Tesalia","Timana","Villavieja","Yaguará"], 
    "La Guajira": ["Riohacha","Albania","Barranca","Dibulla","Distracción","El Molino","Fonseca","La Jagua del Pilar","Maicao","Manaure","San Juan del Cesar","Urumita","Villa Nueva"], 
    "Putumayo": ["Colón","Mocoa","Orito","Puerto Asís","Puerto Caicedo","Puerto Guzman","Leguizamo","San Francisco","San Miguel","Santiago","Sibundoy","Valle del Guamuez","Villagarzón"], 
    "Quindío": ["Armenia","Buenavista","Calarca","Circasia","Córdoba","Filandia","Genova","La Tebaida","Montenegro","Pijao","Quimbaya","Salento"], 
    "San Andrés y Providencia": ["Providencia","San Andrés y Providencia"], 
    "Sucre": ["Buenavista","Caimito","Chalán","Colosó","Coveñas","Corozal","El Roble","Galeras","Guaranda","La Unión","Los Palmitos","Majagual","Morroa","Ovejas","Palmito","Sampués","San Benito Abad","San Juan de Betulia","San Marcos","San Onofre","San Pedro","Sincé","Sincelejo","Sucre","Tolú","Toluviejo"], 
    "Tolima": ["Alpujarra","Alvarado","Ambalema","Anzoátegui","Ataco","Cajamarca","Carmen de Apicalá","Casabianca","Chaparral","Coello","Coyaima","Cunday","Dolores","Espinal","Falán","Flandes","Fresno","Guamo","Guayabal","Herveo","Honda","Ibagué","Icononzo","Lérida","Líbano","Mariquita","Melgar","Murillo","Natagaima","Ortega","Palocabildo","Piedras","Planadas","Prado","Purificación","Rioblanco","Roncesvalles","Rovira","Saldaña","San Antonio","San Luis","Santa Isabel","Suárez","Valle de San Juan","Venadillo","Villahermosa","Villarrica"], 
    "Vaupés": ["Cacarú","Mitú","Papunaua","Pacoa","Taraira","Yavaraté"], 
    "Vichada": ["Cumaribó","La Primavera","Puerto Carreño","Santa Rosalia"] 
}

代码 JS

$(function(){
    var departamentoOptions;
    var ciudadOptions;
    $.getJSON('colombia.json', function(result){
        $.each(result, function(departamento){
            departamentoOptions += "<option value'"+departamento+"'>"+departamento+"</option>";
        });
        $('#departamento').html(departamentoOptions);
    });



    $('#departamento').change(function(){

        $.getJSON('colombia.json', function(result){


            $.each(result, function(i, ciudad){
                ciudadOptions+="<option value'"+ciudad+"'>"+ciudad+"</option>";
                                

            });

            $('#ciudad').html(ciudadOptions);
        });
    });
});

编码 HTML

    <!DOCTYPE html>
   <html lang="en">
   <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <body>
      <select name="" id="departamento">
         <option value=""></option>
     </select>  
     <select name="" id="ciudad">
         <option value=""></option>
     </select>  

    <script src="js/jquery-3.5.1.js"></script>
    <script src="importar.js"></script>
    </body>
    </html>

Answer 1

您需要获取部门选择框的值，然后检查是否将其与您拥有的 json 数据匹配，然后如果找到匹配项，您可以使用 each 循环遍历数据。我还在您的更改下添加了 var ciudadOptions = "";事件当前您只是附加值而不清空它。

演示代码（我已删除此演示代码中不需要的 ajax）：

//demo data
var result = {
  "Amazonas": ["Leticia", "El encanto", "La Chorrera", "La Pedrera", "Miritiparaná", "Puerto Alegría", "Puerto Arica", "Puerto Nariño", "Puerto Santader"],
  "Atlántico": ["Baranoa", "Baranoa", "Barranquilla", "Campo de la Cruz", "Candelaría", "Galapa", "San Juan de Acosta", "Luruaco", "Malambo", "Manatí", "Palmar de Varela", "Piojo", "Polo Nuevo", "Ponedera", "Puerto Colombia", "Repelón", "Sabanagrande", "Sabanalarga", "Santa Lucía", "Santo Tomás", "Soledad", "Suan", "Tubara", "Usiacurí"],
  "Caquetá": ["Albania", "Belén de los Andaquíes", "Cartagena del Chaira", "Curillo", "El Doncello", "El Paujil", "Florencia", "La Montañita", "Milan", "Morelia", "Puerto Rico", "San José de Fragua", "San Vicente del Caguán", "Solano", "Solita", "Valparaíso"]
}



$(function() {
  var departamentoOptions;


  $.each(result, function(departamento) {
    departamentoOptions += "<option value'" + departamento + "'>" + departamento + "</option>";
  });
  $('#departamento').html(departamentoOptions);

  $('#departamento').change(function() {
    //decalre this
    var ciudadOptions = "";
    //get valueof dropdown
    var value = $(this).val();
    $.each(result, function(i, ciudad) {
      //check if value of dropdown is same
      if (i == value) {
        //loop through that array
        $.each(ciudad, function(index, value) {
          ciudadOptions += "<option value'" + value + "'>" + value + "</option>";
        }); //close each loop
      } //close if
    });

    $('#ciudad').html(ciudadOptions);

  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <select name="" id="departamento">
    <option value=""></option>
  </select>
  <select name="" id="ciudad">
    <option value=""></option>
  </select>


</body>

</html>

Answer 2

每次更改部门选择时，您都会填充 ciudad 选择。您永远不会清空上次更改部门选择时添加的选项。

$('#departamento').change(function(){

//empty any previously loaded options
    $('#ciudad').html('');
    $.getJSON('colombia.json', function(result){


        $.each(result, function(i, ciudad){
//do you need to loop through the array of values?
          $.each(ciudad, function(i, c){
//added an = here (value=""), not (value"")
            ciudadOptions+="<option value='"+c+"'>"+c+"</option>";
                            })

        });

        $('#ciudad').html(ciudadOptions);
    });
});