title: How to set the HTML select options from a json
body: <p>I got one external .json file, in which a arry is defined as:</p>
  
  <pre><code>var words = [
      "a",
      "able",
      "about",
      "account",
      "acid",
      "across",
      "act",
      "addition"]
  </code></pre>
  
  <p>My plan is to import in  the .json file via jquery, and then use the values in the array <code>word</code> as the <code>option</code> in a <code>select</code> object.
  My understanding is:</p>
  
  <pre><code>&lt;div&gt;
      &lt;select size="7" class="selection"&gt;&lt;/select&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
      $(document).ready(function () {
          $.getJSON("words-small.json", function (result) {
              $.each(result, function (i, word) {
                  $(".selection").html("&lt;option&gt;word&lt;/option&gt;");
              });
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>or:</p>
  
  <pre><code>&lt;script&gt;
      $(document).ready(function () {
          $.getJSON("words-small.json", function (result) {
              html = ''
              for (i = 0; i &lt; results.length; i++) {
                  html += "&lt;option value=" + result[i] + "&gt;" + result[i] + "&lt;/option&gt;";
              };
              document.getElementById("myselect").innerHTML = html;
          });
      });
  &lt;/script&gt;
  </code></pre>
  
  <p>But neither works here. Please tell me how to fix that.</p>