2

我想解析一个 JSON 对象并从中创建下拉列表。将有六个下拉菜单 -

productType reportNames startDate startMonth endDate endMonth

我能够创建第一个下拉列表“productType”，但是当我尝试创建其他下拉列表时，它会显示一些未定义的错误消息。

这是我的代码 -

HTML

  <select id="product_type"></select>
  <select id="report_type"></select>
  <select id="startDate"></select>
  <select id="startMonth"></select>
  <select id="endDate"></select>
  <select id="endMonth"></select>

Javascript

  var jsonString = '[{"productType": "ABC","reportNames": ["Report1",{"startDate": ["2010","2011"],"startMonth": ["May","June"],"endDate":["2010","2011"],"endMonth": ["May","June"]},"Report 2",{"startDate": ["2010","2011"],"startMonth": ["May","June"],"endDate": ["2010","2011"],"endMonth": ["May","June"]}]},{"productType": "XYZ","reportNames": ["Report 3",{"startDate": ["2010","2011"],"startMonth": ["May","June"],"endDate": ["2010","2011"],"endMonth": ["May","June"] },"Report 4",{"startDate": ["2010","2011"], "startMonth": ["May", "June" ],"endDate": ["2010","2011"],"endMonth": ["May","June"]}]}]';



  var myData = JSON.parse(jsonString);

  var $product_type = $('#product_type');
  var $report_type = $('#report_type');

  $.each(myData, function () {
      $('<option>' + this.productType + '</option>').appendTo($product_type);
  });

  $.each(myData, function () {
      $('<option>' + this.productType[0].reportNames +   '</option>').appendTo($report_type);

});

基本上我想创建六个这样的下拉菜单：

产品类型 - ABC、XYZ

报告名称 - 报告 1、报告 2

开始日期 - 2010, 2011

startMonth - 五月，六月

结束日期 - 2010, 2011

endMonth - 五月，六月

我正在使用 jQuery 来解析 JSON 对象。这是演示 - http://jsfiddle.net/Lnv9d/3/

4

4 回答 4

4

您为第二个下拉列表错误地访问了您的 JSON。

this.productType是一个字符串，而不是一个数组，所以你不能调用this.productType[0].reportNames

如果您将其更改为this.reportNames[0]then 您可能会得到您正在寻找的东西。

这是更新的jsFiddle

编辑：这是一个新的小提琴，它根据已选择的内容处理显示和隐藏选项。它可能会使用一些优化，但它可以工作。

于 2013-09-04T04:32:28.540 回答
1 
This is the updated one


var counter = 0; 
var reportCounter = 0;
$.each(myData, function () {

    $('<option>' + this.productType + '</option>').appendTo($product_type);

    $('<option>' + this.reportNames[1].startDate[counter] + '</option>').appendTo($start_date);
    var that = this;

    $.each(this.reportNames, function () {
       if(reportCounter <= 2)
        $('<option>' + that.reportNames[reportCounter] + '</option>').appendTo($report_type);
        reportCounter = reportCounter + 2;
    });
    $('<option>' + this.reportNames[1].startMonth[counter] + '</option>').appendTo($start_month);

    $('<option>' + this.reportNames[1].endDate[counter] + '</option>').appendTo($end_date);

    $('<option>' + this.reportNames[1].endMonth[counter] + '</option>').appendTo($end_month);

    counter++;
});
于 2013-09-04T06:25:01.513 回答
1 
You don't need to run the loop again for every select box.

You can try this , you will get the same result.

var myData = JSON.parse(jsonString);
var $product_type = $('#product_type');
var $report_type = $('#report_type');
var $start_date = $('#startDate');
var $start_month = $('#startMonth');
var $end_date = $('#endDate');
var $end_month = $('#endMonth');

var counter = 0; 
$.each(myData, function () {
    $('<option>' + this.productType + '</option>').appendTo($product_type);

    $('<option>' + this.reportNames[1].startDate[counter] + '</option>').appendTo($start_date);

    $('<option>' + this.reportNames[0] + '</option>').appendTo($report_type);

    $('<option>' + this.reportNames[1].startMonth[counter] + '</option>').appendTo($start_month);

    $('<option>' + this.reportNames[1].endDate[counter] + '</option>').appendTo($end_date);

    $('<option>' + this.reportNames[1].endMonth[counter] + '</option>').appendTo($end_month);

    counter++;
});
于 2013-09-04T05:25:47.350 回答
1

改变这个：

$.each(myData, function () {
   $('<option>' + this.productType[0].reportNames + '</option>').appendTo($report_type);
});

至：

$.each(myData, function () {
   $('<option>' + this.reportNames[0] + '</option>').appendTo($report_type);
});
于 2013-09-04T04:33:26.110 回答