2016-11-16 52 views
0

我試圖顯示博物館名稱被點擊時的選項下拉框中的更多博物館信息。我從json數組中獲取數據。我能夠填充博物館名稱的選項框,但無法顯示更多詳細信息。任何人都可以幫助我這個。我正在使用jQuery這個代碼。如何從json數組中獲取更多數據當選擇標籤中的值被選中時jquery

function getMuseums() { 

    var museumSelect = $("<select id=\"museumlist\" name=\"museumlist\" onChange=\"getMuseumInfo()\" />"); 
    var info = $("<span>Select Museum: </span>") 

    $.get("museums.php",function(data,status) { 
     var response = ''; 
     var json = $.parseJSON(data); 
     museums = json.museums; 
     $.each(museums, function (index, item) { 

      $('<option />').attr({"value" : index}).text(item.museum_name).appendTo(museumSelect); 

      /*response += "<option value='"+index+"'>" + item.museum_name + "</option>"; 
      $("#museumlist").html(response);*/ 

     }); 

     $('#content').empty().append(info, museumSelect); 
     $("<div id=\"museumDetails\" />").appendTo("#MuseumDiv"); 

     getMuseumInfo() 

    }); 
} 

function getMuseumInfo() { 
    var museum_id = $("#museumlist").val(); 
    selectedMuseumid = museum_id; 
    $("#MuseumDiv").empty().append("<div id=\"museumDetails\"/>"); 

    var url = "museums.php?museum_id=" +escape(museum_id); 

    $.get(url,function(data,status) { 
     var json = $.parseJSON(data); 
     museums = json.museums; 

     var museum_name = museums.museum_name; 
     var museum_description = museums.museum_description; 

     var museumInfo = "<h3>" + museum_name + "</h3><p>" + museum_description + "</p>"; 

     $("#museumDetails").empty().append(museumInfo); 

    }); 
} 
+0

我想你正在用getMuseumInfo函數獲取細節,是否顯示了一些錯誤? –

+0

沒有錯誤顯示。 –

+0

你如何從HTML調用你的getMuseums函數? –

回答

0

您可以選擇價值傳遞給你的函數作爲參數getMuseumInfo(this.value)

var museumSelect = $("<select id=\"museumlist\" name=\"museumlist\" onChange=\"getMuseumInfo(this.value)\" />"); 

而且比你可以通過博物館使用迭代和檢查,如果指數是一樣的期權價值,然後只打印該項目的屬性。

$.each(museums, function(index, item) {  
    if (index == id) { 
     var museumInfo = "<h3>" + item.museum_name + "</h3><p>" + item.museum_description + "</p>";  
     $("#MuseumDiv").empty().append(museumInfo); 
    } 
}); 

不過還好檢查工作的代碼(也應用程式來開啓控制檯): codePen

注: 我做例子的請求創建JSON數據。我請求網址: https://api.myjson.com/bins/58j10

相關問題