title: JS/HTML -- dynamically create select element with options
body: <p>I have an ExtJS application. In my grid I am using the columns renderer function to return the select element drop down. My current implementation is below:</p>
  
  <p>//grid col renderer fn</p>
  
  <pre><code>renderer:function(val, meta, rec) {
    return [
      '&lt;select id="states"  value="" disabled selected&gt;Select...&lt;/option&gt;'+             
        '&lt;option value="CA"&gt;California&lt;/option&gt;'+
        '&lt;option value="NY"&gt;New York&lt;/option&gt;'+
        '&lt;option value="TX"&gt;Texas&lt;/option&gt;'+
        '&lt;option value="FL"&gt;Florida&lt;/option&gt;'+
        '&lt;option value="NJ"&gt;New Jersey&lt;/option&gt;'+               
      '&lt;/select&gt;'
    ];
  </code></pre>
  
  <p>and this all works fine but now the list of options is going to be dynamic. The sample JSON is below:</p>
  
  <pre><code>"states":[{"value":"CA","name":"California"},{"value":"Ny", "name":"New York"},{...}]
  </code></pre>
  
  <p>So I want to iterate the "states" array and create an option el for each object then push that option into the select element. </p>
  
  <p>Thanks</p>