title: How to get more data from json array when a value in option tag is selected jquery
body: <p>I'm trying to display more info of the museum when a museum name is clicked fro the option dropdown box. I am getting my data from a json array. I was able to populate the option box with the name of the museum but could not display more details. Could anyone please help me with this. I'm using jquery for this code.</p>
  
  <pre><code>function getMuseums() {
  
      var museumSelect = $("&lt;select id=\"museumlist\" name=\"museumlist\" onChange=\"getMuseumInfo()\" /&gt;");
      var info = $("&lt;span&gt;Select Museum: &lt;/span&gt;")
  
      $.get("museums.php",function(data,status) {
          var response = '';
          var json = $.parseJSON(data);
          museums = json.museums;
          $.each(museums, function (index, item) {
  
              $('&lt;option /&gt;').attr({"value" : index}).text(item.museum_name).appendTo(museumSelect);
  
              /*response += "&lt;option value='"+index+"'&gt;" + item.museum_name + "&lt;/option&gt;";
              $("#museumlist").html(response);*/
  
          });
  
          $('#content').empty().append(info, museumSelect);
          $("&lt;div id=\"museumDetails\" /&gt;").appendTo("#MuseumDiv");
  
          getMuseumInfo()
  
      });
  }
  
  function getMuseumInfo() {
      var museum_id = $("#museumlist").val();
      selectedMuseumid = museum_id;
      $("#MuseumDiv").empty().append("&lt;div id=\"museumDetails\"/&gt;");
  
      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 = "&lt;h3&gt;" + museum_name + "&lt;/h3&gt;&lt;p&gt;" + museum_description + "&lt;/p&gt;";
  
          $("#museumDetails").empty().append(museumInfo);
  
      });
  }
  </code></pre>