如何通過javascript顯示json到html

Question

嗨，我想要一個這樣的功能！ http://i.stack.imgur.com/p61fq.png

當我選擇第一個“選擇標簽”時

secoud“選擇標簽”顯示未定義

但是在這張照片中，控制台區域正好顯示了我想要的內容。

我的問題是...如何在第二個“選擇標簽”中顯示數據？

我認為這是我的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. 數據是原始對象（不是此迭代的對象）
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