Question

我是json的新手，我正试图通过select来显示json数据中的一些信息。这是可能的？？

[
{
  "id": 1,
  "country": "Spain",
  "more": [
      {
        "city": "Barcelona",
        "age": 1992,
        "language": "catalan",
      },
      {
        "city": "Madrid",
        "age": 2001,
        "language": "spanish",
      }
  ]
},
{
"id": 2,
"country": "Portugual",
"more": [
    {
      "city": "Porto",
      "age": 2009,
      "language": "portuguese",
    },
    {
     "city": "Madeira",
     "age": 1997,
     "language": "portuguese",
    }
  ]
}
]

所以，我有一个适用于这个.js文件的选择：

var json = '[{"id":1,"country":"Spain","more"[{"city":"Barcelona","age":1992,"language":"catalan",},{"city":"Madrid","age":2001,"language":"spanish",}]},{"id":2,"country":"Portugual","more":[{"country":"Porto","age":2009,"language":"portuguese",},{"country":"Madeira","age":1997,"language":"portuguese",}]}]';

var items = JSON.parse(json);
var $selectElement = $("#list");

$(items).each(function(){
  var option = '<option value="' + this.id + '">' + this.city + '</option>';
  $selectElement.append(option);
});

这是我的HTML

<div class="form-group">
  <label>Select the city:</label>
  <select class="form-control" id="list" name="list"> 
  </select>
</div>

<div id="info">
  <h1><span class="city">  </span></h2>
  <h2><span class="age"> </span></h2>
  <h3><span class="language">  </span></h3>
</div>

现在我想在选择Country时填写HTML“more” - 来自json-信息，并在我更改select中的选项时进行更改。如果有人可以帮助我，我将不胜感激！

编辑 - 所有答案都完美无缺。我接受了我选择使用的问题！ - 谢谢！

Answer 1

您的JSON是一个带有Object with Array with Object的数组。因此，您应该遍历数组以获取所选选项所需的值。这个Fiddle应该有用。

 $('body').on('change', '#list', function() {
  var selectedOption = this.value;
  $(items).each(function() {
    if (this.id.toString() === selectedOption) {
      $('#info').html(returnData(this.more));
      return;
    }
  })
})

var returnData = function(arr) {
  var t = '';
  console.log(arr)
  $(arr).each(function() {
    var objKeys = Object.keys(this);
    console.log(objKeys)
    var s = ''
    for (var i = 0; i < objKeys.length; i++) {
      s += '<h' + (i + 1) + '><span class="' + objKeys[i] + '">' + this[objKeys[i]] + '</span></h' + (i + 1) + '>';
      console.log(s, objKeys[i])
    }
    t += s;
  });
  return t;
}

Answer 2

您可以使用这种方式循环并从more获取值：

$("#list").on('change', function() {
  var id = $(this).val();
  $('#info').empty();
  $(items).each(function() {
    if (this.id == id) {
      $(this.more).each(function() {
        $('#info').append('<h1><span class="city">' + this.city + ' </span></h1>' +
          '<h2><span class="age"> ' + this.age + '</span></h2>' +
          '<h3> <span class="language">' + this.language + '  </span></h3>');
      });
    }
  });
});

这是工作Fiddle。这是最简单的方法。

Answer 3

如果您想使用一个select，则需要多个select，或者您需要将国家/地区信息与城市信息（带两个循环）结合使用。以下是如何使用两个select元素：

var items = [{
  "id": 1,
  "country": "Spain",
  "more": [
      {
        "city": "Barcelona",
        "age": 1992,
        "language": "catalan",
      },
      {
        "city": "Madrid",
        "age": 2001,
        "language": "spanish",
      }
  ]
},
{
"id": 2,
"country": "Portugual",
"more": [
    {
      "city": "Porto",
      "age": 2009,
      "language": "portuguese",
    },
    {
     "city": "Madeira",
     "age": 1997,
     "language": "portuguese",
    }
  ]
}],
    opt  = $('<option/>'),
    sel  = $('#list'),
    city = $('#city'),
    info = $('#info');

$.each( items, function(i, item) {
    opt.clone().val( item.id ).text( item.country ).data('cities', item.more).appendTo( sel );
});

sel.on('change', function() {
    city.empty();
    var data = $('option:selected',this).data('cities');
    $.each( data, function(j, cty) {
        opt.clone().val( j ).text( cty.city ).data('city', cty).appendTo( city );
    });
    city.change();
})
.change();

city.on('change', function() {
    var cityData = $('option:selected',this).data('city');
    info.find('.city').html( cityData.city );
    info.find('.age').html( cityData.age );
    info.find('.language').html( cityData.language );
})
.change();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="col-lg-2 form-group">
  <label for="sel1">Select Country:</label>
  <select class="form-control" id="list" name="list"> 
  </select>
</div>

<div class="col-lg-2 form-group">
  <label for="sel1">Select the city:</label>
  <select class="form-control" id="city" name="city"> 
  </select>
</div>

<div class="col-lg-2 info" id="info">
  <h1><span class="city">  </span></h2>
  <h2><span class="age"> </span></h2>
  <h3> <span class="language">  </span></h3>
</div>

使用从多数组JSON中选择来填充div

3 个答案: