读取 JSON 数组并在 HTML 中打印

Question

我已经开发了以下练习，我必须确保根据 JSON 文件向我显示与它对应的部门，到目前为止，我已经设法向我展示了他们选择的部门，但我没有管理仅向我显示与各自选择中的每个部门相对应的城市。 我的代码如下：在此处输入图像描述

数据 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

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

$('#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);
    });
});