Country->State->City Dependent 下拉菜单显示“对象 [对象]答案

【问题标题】：Country->State->City Dependent dropdown showing 'object [Object]Country->State->City Dependent 下拉菜单显示“对象 [对象]
【发布时间】：2018-10-23 00:54:57
【问题描述】：

我正在为国家、州和城市构建一个依赖下拉列表。进展并不顺利。在过去的几天里，我在 Stackoverflow 和网络上的其他网站上对该主题进行了广泛的研究，但无法让“#state”选择对象根据所选的“#country”选择对象填充状态从json填充国家就好了。根据“更改”方法选择国家后，州不会填充。我有一个“if”语句，上面写着“如果选定的 #country === 'US'（显示为北美），则加载美国各州和领地的 .json 文件。

在摆弄代码之后，我终于能够让“#state”下拉菜单至少显示“object [Object]”，所以我知道我离解决方案越来越近了。我不太确定为什么它在状态下拉列表中显示“对象 [对象]”。这可能是某种“类型”错误，其中 json 显示为对象而不是字符串，但我不明白如何在我的代码上下文中解决此问题。

任何帮助将不胜感激。

这是 HTML：

<!doctype html>
<html>
<head>
    <title>Country->State->City</title>
</head>
<body>
Country:
<select id="country">
    <pre><option selected value="base">Select Country</option><pre>
</select>

State:
<select id="state">
    <option selected value="base">Select state</option>
</select>

City:
<select id="city">
    <option selected value="base">Select City</option>
</select>

<script type = "text/javascript" src="jquery-2.2.4.min.js"></script>
<script type = "text/javascript" src="custom.js"></script>
</body>
</html>

jQuery

$(function(){
    let countryOptions;
    let stateOptions;
    let gaCitiesOps;

    $.getJSON('countries.json',function(data){
        $.each(data, function(i,country) {
            countryOptions+=
                '<option value= "'+country.code+'">'
                +country.name+
                '</option>';
             });
             $('#country').html(countryOptions);
    });

    $("#country").change(function(){
        if($(this).val()==="US"){
        $.getJSON('us_states.json',function(data){
            $.each(data, function(stateCode,stateName) {
                stateOptions+='<option value="'+stateCode+'">'
                +stateName+
                '</option>';
                 });
                 $('#state').html(stateOptions);
            });
        }
    });

    $("#state").change(function(){
    if($(this).val()==="GA"){
            $.getJSON('GA_cities.json',function(data){
            $.each(data, function(statecode,city) {
                gaCitiesOps +='<option value="'+statecode+'">'
                +city+
                '</option>';
                 });
                 $('#city').html(gaCitiesOps);
            });
        }
    });

});

Countries.json

[
  {
    "code": "US",
    "name": "North America"
  },
  {
    "code": "AG",
    "name": "Antigua"
  },
  {
    "code": "AU",
    "name": "Australia"
  },
  {
    "code": "AT",
    "name": "Austria"
  },
  {
    "code": "BG" ,
    "name": "Bulgaria"
  },
  {
    "code": "CA",
    "name": "Canada"
  },
.....ect

us_states.json

[
  {
    "stateCode": "AL",
    "name": "Alabama"
  },
  {
    "stateCode": "AR",
    "name": "Arkansas"
  },
  {
    "stateCode": "AS",
    "name": "American Samoa"
  },
  {
    "stateCode": "AZ",
    "name": "Arizona"
  },
  {
    "stateCode": "CA",
    "name": "California"
  },
.....etc

GA_cities.json

[
  {
    "code": "ALB",
    "name": "ALBANY"
  },
  {
    "code": "AMR",
    "name": "AMERICUS"
  },
  {
    "code": "ATH",
    "name": "ATHENS"
  },
  {
    "code": "ATL",
    "name": "ATLANTA"
  },
  {
    "code": "AUG",
    "name": "AUGUSTA"
  },
  {
    "code": "BAI",
    "name": "BAINBRIDGE"
  },
....etc

感谢您的考虑！

【问题讨论】：

您是否正确加载了国家/地区？你能发布你从每个 AJAX 调用中得到的 JSON 结构吗？
国家/地区加载正常。
你的意思是像控制台输出的结构吗？
不，只是 JSON - 你已经发布了我要求的内容。

标签： javascript jquery json typescript logic

【解决方案1】：

您错误地使用了$.each。第一个参数是索引/键，第二个是值。在您的情况下，您遍历对象数组-因此第一个参数是索引，第二个参数是每个包含的对象。将此代码用于状态：

$.each(data, function(index,stateObj) {
            stateOptions+='<option value="'+stateObj.stateCode+'">'
            +stateObj.name+
            '</option>';
             });
             $('#state').html(stateOptions);
        });

这适用于城市：

$("#state").change(function(){
    if($(this).val()==="GA"){
            $.getJSON('GA_cities.json',function(data){
            $.each(data, function(index,city) {
                gaCitiesOps +='<option value="'+city.code+'">'
                +city.name+
                '</option>';
                 });
                 $('#city').html(gaCitiesOps);
            });
        }
    });

您还可以使用 JS API 添加 options，这比将整个选项 HTML 构造为字符串并将其转储到 html() 稍好一些。替代方法请参见this question。

【讨论】：

感谢大家的帮助。我明白您对遍历数组并使用正确的语法访问 json 的意思。它就像一个魅力。非常感谢！！！

【解决方案2】：

console.log() 是你最好的朋友。尝试记录您从 $.each 获得的值，您就会知道为什么会收到 [object Object]。

$.each(data, function(stateCode, stateName));

输出为stateCode 0, stateName {stateCode: "AL", name: "Alabama"} $.each 参数是 (key, value) 并且您正在遍历一个数组，因此键（在本例中为 stateCode）是数组的索引。

ES6;如果你想花哨，你可以解构论点 $.each(key, {stateCode, name});

【讨论】：