使用jQuery/Json将值加载到HTML select

我试图使用json字符串中的值动态地将值加载到select中

数据加载正确，但由于某些原因，只有第一个值加载到select中。有人知道为什么会这样吗

以下是我的JSON数据：

[{
  "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 & Culture",
  "cat_order": "2",
  "cat_parent_id": "0"
}, {
  "cat_id": "3",
  "cat_section": "pages",
  "cat_type": "cat",
  "cat_name": "Travel & 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"
}]

下面是我的jQuery：

$("select#select_category").change(function() {
  $.getJSON("<?php echo site_url()?>ajax/categories/pages/" + $(this).val(), function(data) {
    var options = '';
    for (var i = 0; i < data.length; data++) {
      options += '<option value="' + data[i].cat_id + '">' + data[i].cat_name + '</option>';
    }
    $("select#select_subcategory").html(options);
  })
});

---

在for循环中应该是i++而不是data++

我真的很感谢你花时间来写这些。好建议！

for (var i = 0; i < data.length; data++) {

var siteurl= <?php echo json_encode(site_url(), JSON_HEX_TAG); ?>;

$('#select_category').change(function(){
    $.getJSON(siteurl+'ajax/categories/pages/'+$(this).val(), function(data) {
        $('#select_subcategory').empty();
        $.each(data, function() {
            $('#select_subcategory').append(new Option(this.cat_name, this.cat_id));
        });
    });
});