title: Loading values into an HTML select using jQuery/Json
body: <p>I am trying to load values into a select dynamically using values from a json string.</p>
  
  <p>The data is being loaded correctly, but for some reason, only the 1st value is loading into the select. Can anyone spot why this could be?</p>
  
  <p>Here is my JSON data:</p>
  
  <pre><code>[{
    "cat_id": "1",
    "cat_section": "pages",
    "cat_type": "cat",
    "cat_name": "Music",
    "cat_order": "1",
    "cat_parent_id": "0"
  }, {
    "cat_id": "2",
    "cat_section": "pages",
    "cat_type": "cat",
    "cat_name": "Arts &amp; Culture",
    "cat_order": "2",
    "cat_parent_id": "0"
  }, {
    "cat_id": "3",
    "cat_section": "pages",
    "cat_type": "cat",
    "cat_name": "Travel &amp; Escape",
    "cat_order": "3",
    "cat_parent_id": "0"
  }, {
    "cat_id": "4",
    "cat_section": "pages",
    "cat_type": "cat",
    "cat_name": "Technology",
    "cat_order": "4",
    "cat_parent_id": "0"
  }]
  </code></pre>
  
  <p>An here is my jQuery:</p>
  
  <pre><code>$("select#select_category").change(function() {
    $.getJSON("&lt;?php echo site_url()?&gt;ajax/categories/pages/" + $(this).val(), function(data) {
      var options = '';
      for (var i = 0; i &lt; data.length; data++) {
        options += '&lt;option value="' + data[i].cat_id + '"&gt;' + data[i].cat_name + '&lt;/option&gt;';
      }
      $("select#select_subcategory").html(options);
    })
  });
  </code></pre>