title: Dynamically generated select option dropdown menu using JavaScript
body: <p>This is the select menu I am going to create. But as you can see there are static data. As I actually have bunch of JSON data passed from backend servlet, so there will be hundreds of items for options. I want something like dynamically generate option menu for my dropdown box.</p>
  
  <pre><code>&lt;select id="brand-select" name="brand"&gt;
      &lt;option value="audi"&gt;Audi&lt;/option&gt;
      &lt;option value="bmw"&gt;BMW&lt;/option&gt;
      &lt;option value="lexus"&gt;Lexus&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This is my tryout and it doesn't work:</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;select id="brand-select" name="brand" onChange="createOptions"&gt;
      &lt;option value="none"&gt;&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>//Asssume I have jsonDataForBrands ready, and it contains 100s items
  function createOptions() {
      for (var fieldIndex in jsonDataForBrands) {
          html += '&lt;option value=' + fieldIndex  + '&gt;' + jsonDataForBrands[field].title + '&lt;/option&gt;';
  }
  </code></pre>