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

Question

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

数据正确加载,但由于某种原因,只有第一个值加载到选择中.谁能发现为什么会这样？

这是我的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++在你的for循环

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