javascript - 如何通过javascript将json显示为html

Question

嗨，我想要这样的功能! http://i.stack.imgur.com/p61fq.png

当我选择第一个“选择标签”时

第二个“选择标签”显示未定义

但在这张图片中，CONSOLE 区域正是显示我想要的。

我的问题是...如何在第二个“选择标签”中显示数据？

我认为我的 javascript 有问题。

$.ajax({
    type: "POST",
      url: "dropdownServlet",
      data: dataString,
      dataType: "json",
      success: function( data, textStatus, jqXHR) {
          $("#dropdown2").html("");
            $.each(data, function(){
                $.each(this,function(){
                    $("#dropdown2").append("<option>"+data.CiytName+"</option>");   
                });
            });            
     },

这是我的 json 数据

[{"CityId":"4","CityName":"Vancouver"},{"CityId":"5","CityName":"Toronto"}]

Answer 1

您需要做的就是:

    $.each(data, function(_, ob){
        $("#dropdown2").append("<option>"+ob.CityName+"</option>");   

   });    

1. 因为你的数据已经是[{"CityId":"4","CityName":"Vancouver"},{"CityId":"5","CityName":"Toronto"}] 你只需要使用一级 $.each 迭代和 data.CiytName 有 2 个问题，
2. data为原始对象(不是本次迭代的对象)
3. CiytName 有错别字。

我只是建议不要在 $.each 循环迭代中追加以减少 DOM 操作的数量，尤其是当您的 json 中有大量数据要作为选项追加时。

      var select = $('<select/>'); //Create a temp element.
        $.each(data, function(){
                select.append("<option>"+ob.CityName+"</option>");   //append to the temp element 
         });       

        $("#dropdown2").html(select.html());  //finally fill in the dropdown with your latest options.

引用$.each