Загрузка значений в выбор HTML с использованием jQuery / Json

Question

Я пытаюсь загрузить значения в выборку динамически, используя значения из строки json.

Данные загружаются правильно, но по какой-то причине только 1-е значение загружается в выбор.Может кто-нибудь определить, почему это может быть?

Вот мои данные 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);
       })
   });

Answer 1

должно быть i++, а не data++ в вашем цикле

Answer 2

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

Очевидно, должно быть i++.

Но в общем случае не следует создавать динамическое содержимое страницы с использованием HTML-слинга.Ваш код не будет работать, если имена категорий содержат символы, которые являются специальными в разметке HTML.Если категории могут быть введены пользователем, это дает вам дыры в безопасности межсайтовых сценариев.Вместо этого вы можете использовать ярлык создания jQuery 1.4 $('<option>', {text: foo, value: bar}) или, что еще проще, new Option().В любом случае свойства устанавливаются напрямую, а не встраиваются в строку, поэтому вам не нужно беспокоиться о проблемах с выходом из HTML.

Также, когда вы выплевываете строки (или другие данные) из PHP в источник JavaScript, вам следуетиспользуйте json_encode() для их правильного преобразования, в противном случае у вас будут проблемы с символами, которые являются специальными в строковых литералах JavaScript (', ", \ и различных управляющих кодах) или в прилагаемом файле HTML (</script>).Опять же, может быть, это не будет иметь значения для конкретных значений, которые у вас здесь есть, но в целом этот материал является источником многих проблем, связанных с защитой.

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));
        });
    });
});