title: Add options to dropdown via JQuery AJAX request (as json Object)
body: <p>I currently try to get into JQuery and, to be more specific, into AJAX requests. </p>
  
  <p><strong>Code:</strong><br>
  Javascript:</p>
  
  <pre><code>success: function(json) {
          console.log(json);
          var $el = $("#system");
          $el.empty(); // remove old options
          $el.append($("&lt;option&gt;&lt;/option&gt;")
              .attr("value", '').text('Please Select'));
  
          // for each set of data, add a new option
          $.each(json, function(value, key) {
              $el.append($("&lt;option&gt;&lt;/option&gt;")
                  .attr("value", value).text(key));
          });
  
  },
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form id="filter"&gt;
      &lt;label for="datepicker"&gt;
          Date: &lt;input id="datepicker" onchange="updateSystems()" type="text" /&gt;
      &lt;/label&gt;
      &amp;nbsp;
      &lt;label&gt;from:
          &lt;select id="timespan-from"  name="timespan-from" onchange="updateSystems()" size="1"&gt;
              &lt;option value="0"&gt;0 Uhr&lt;/option&gt;
              ...
              &lt;option value="23"&gt;23 Uhr&lt;/option&gt;
          &lt;/select&gt;
      &lt;/label&gt;
      &amp;nbsp;
      &lt;label&gt;to:
          &lt;select id="timespan-to" name="timespan-to" onchange="updateSystems()" size="1"&gt;
              &lt;option value="0"&gt;23 Uhr&lt;/option&gt;
              ...
              &lt;option value="0"&gt;0 Uhr&lt;/option&gt;
          &lt;/select&gt;
      &lt;/label&gt;
      &amp;nbsp;
      &lt;label&gt;in System:
          &lt;select id="system" name="system" size="1"&gt;
              &lt;!-- this should be updated --&gt;
              &lt;option&gt;Amarr&lt;/option&gt;
              &lt;option&gt;JEIV-E&lt;/option&gt;
              &lt;option&gt;Jita&lt;/option&gt;
              &lt;option&gt;Litom&lt;/option&gt;
              &lt;option&gt;Penis&lt;/option&gt;
          &lt;/select&gt;
      &lt;/label&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This function is triggered whenever I change a field in my document, 
  and should update the elements of a html dropdown.</p>
  
  <p>The AJAX request works, but the dropdown-update does not work as intended. I try to add some <code>&lt;option&gt;</code> fields to the <code>&lt;select&gt;</code> dropdown with the id <code>id=system</code>.</p>
  
  <p>However, the result dropdown always looks like this:</p>
  
  <ul>
  <li>Please Select</li>
  <li>[object Object]</li>
  </ul>
  
  <p>What needs to be changed so my functions adds my json data to my dropdown menu?</p>
  
  <p>Example JSON return from my php script:</p>
  
  <pre><code>[
      {
          "solarSystemID": "30001171",
          "solarSystemName": "F4R2-Q"
      },
      {
          "solarSystemID": "30001182",
          "solarSystemName": "MB-NKE"
      },
      {
          "solarSystemID": "30004299",
          "solarSystemName": "Sakht"
      },
      {
          "solarSystemID": "30004738",
          "solarSystemName": "1-SMEB"
      }
  ]
  </code></pre>
  
  <p><code>solarSystemID</code> should become the value of the <code>&lt;option&gt;</code>,<br>
  <code>solarSystemName</code> should be the text.</p>
  
  <p>Thanks in advance for any help, I guess I just need a little push in the right direction for it to finally work as intended.</p>