Question

我之前使用过上一篇文章（Use jQuery to change a second select list based on the first select list option）的工作版本来填充两个选择框 - 一个带有批发商名称（#wholesaler_name），然后第二个带有选定批发商的城市列表封面（#wholesaler_city）。

JSON数据源已经从原始版本扩展而来，现在包含了每个城市的ID，我正在努力探索如何提取位置和ID的数据，如下所示。

旧结构是：

{
  "Wholesaler 1": [
    "City 1",
    "City 2",
    "City 3"
  ],
  "Wholesaler 2": [
    "City 4",
    "City 5",
    "City 6"
  ]
}

新的JSON结构是：

{
  "Wholesaler 1": {
      "locations": [
          { "name":"City 1", "id":"12345" },
          { "name":"City 2", "id":"56789" },
          { "name":"City 3", "id":"01234" }
      ]
    },
    "Wholesaler 2": {
      "locations": [
          { "name":"City 4", "id":"34567" },
          { "name":"City 5", "id":"89012" },
          { "name":"City 6", "id":"34567" }
      ]
    }
}

目的是使用数据填充两个选择框，第二个框根据第一个框的值进行更改（如上面引用的帖子）。我使用的代码如下：

$(document).ready(function () {


 "use strict";

 var selectData, $wholesaler;

 function updateSelects() {
   var cities = $.map(selectData[this.value], function (wholesaler) {
     return $("<option />").text(wholesaler);
   });

   $("#wholesaler_city").empty().append(cities);
 }

 $.getJSON("wholesalers-test.json", function (data) {

  var state;
  selectData = data;
  $wholesaler = $("#wholesaler_name").on("change", updateSelects);
    for (state in selectData) {
       $("<option />").text(state).appendTo($wholesaler);
    }
    $wholesaler.change();

  });
});

所以我需要修改＆＃34;城市＆＃34;变量来提取＆＃34;位置/名称＆＃34;的值对于每个条目，我还需要创建一个单独的＆＃34; id＆＃34;来自每个城市的id的变量。

但是，虽然第一个选择使用批发商名称填充，但第二个只是[object Object]，[object Object]等的一个条目。

我已尝试使用任意数量的点和括号表示法来尝试获取数据，但我知道我错过了一些明显的东西 - 这不是我常用的区域所以任何指针非常感谢！

Answer 1

由于城市成为一个对象数组，您还需要通过此数组循环以逐个添加选项。此外，您需要使用每个城市对象的属性作为每个选项的文本和值。

＆＃13;

$(document).ready(function(){

 "use strict";

 var selectData, $wholesaler;

 function updateSelects() {
   var cities = $.map(selectData[this.value], function (wholesaler) {
   var options = [];
   	if(wholesaler.length > 0){
    	wholesaler.map(function(city){
      	options.push($("<option />").text(city.name).val(city.id));
      });
    }
    return options;
   });
   $("#wholesaler_city").empty().append(cities);
 }

//$.getJSON("wholesalers-test.json", function (data) {
    var state;
    selectData = {
    "Wholesaler 1": {
        "locations": [
            { "name":"City 1", "id":"12345" },
            { "name":"City 2", "id":"56789" },
            { "name":"City 3", "id":"01234" }
        ]
      },
      "Wholesaler 2": {
        "locations": [
            { "name":"City 4", "id":"34567" },
            { "name":"City 5", "id":"89012" },
            { "name":"City 6", "id":"34567" }
        ]
      }
  };;
    $wholesaler = $("#wholesaler_name").on("change", updateSelects);
      for (state in selectData) {
         $("<option />").text(state).appendTo($wholesaler);
      }
      $wholesaler.change();
//});

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="wholesaler_name"></select>
<select id="wholesaler_city"></select>

＆＃13;

Answer 2

您需要对代码进行以下更改：

function updateSelects() {
  var wholesaler = selectData[value];
  var cities = [];
  for (var idx in wholesaler.locations){
    cities.push("<option>" + wholesaler.locations[idx].name + "</option>");
  }   

  $("#wholesaler_city").empty().append(cities);
 }

不是尝试使用jQuery的便捷功能，在您的情况下，只需在一个简单的循环中手动编译html就更简单了。

使用嵌套的JSON数据

2 个答案: