使用jQuery / Json将值加载到HTML选择中 [英] Loading values into an HTML select using jQuery/Json

问题描述

数据加载正确，但由于某种原因，只有第一个值正在加载到选择。任何人都可以知道为什么这可能是？

这是我的JSON数据：

  [{ CAT_ID： 1， cat_section： 网页， cat_type： 猫， cat_name： 音乐， 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：旅行和逃生，cat_order cat_parent_id： 0}，{ CAT_ID： 4， cat_section： 网页， cat_type： 猫， cat_name： 技术， 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 var i = 0; i< data.length; data ++）{
  

显然应该是 i ++ 。

但通常情况下，您不应使用HTML字符串索引创建动态页面内容。当类别名称包含HTML标记中特殊的字符时，您的代码将失败。如果类别可能由用户输入，则会给您提供跨站点脚本的安全漏洞。
相反，您可以使用jQuery 1.4创建快捷方式 $（'< option>'，{text：foo，value：bar}），或者更简单在这种情况下，新选项（）。无论哪种方式直接设置属性，而不是嵌入字符串，所以你不必担心HTML转义问题。

另外，当你吐字符串（或其他数据）从PHP到JavaScript的源代码，你应该使用 json_encode（）来正确地转换它们，否则你会遇到JavaScript字符串文字中特殊字符的问题（'，， \ 和各种控制代码）或（< / script> ）。再一次，也许这对你在这里的具体值无关紧要，但总的来说，这些东西是许多安全敏感的转义问题。

  var siteurl =<？php echo json_encode（site_url（），JSON_HEX_TAG）;？> ; 
 
 $（'＃select_category'）。change（function（）{
 $ .getJSON（siteurl +'ajax / categories / pages /'+ $（this）.val（），函数（数据）{
 $（'＃select_subcategory'）。empty（）; 
 $ .each （data，function（）{
 $（'＃select_subcategory'）。append（new Option（this.cat_name，this.cat_id））; 
}）; 
}）; 
}）; 
  

I am trying to load values into a select dynamically using values from a json string.

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?

Here is my JSON data:

[{"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"}]

An here is my 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 (var i = 0; i < data.length; data++) {

Should clearly be i++.

But in general you shouldn't create dynamic page content using HTML string-slinging. Your code will fail when category names contain characters that are special in HTML markup. If categories may be input by the user, that gives you cross-site-scripting security holes. Instead you can use the jQuery 1.4 creation shortcut $('<option>', {text: foo, value: bar}), or even more simply in this case, new Option(). Either way sets properties directly instead of embedded in a string, so you don't have to worry about HTML-escaping issues.

Also when you spit strings (or other data) from PHP to JavaScript source, you should be using json_encode() to convert them properly, otherwise you'll have problems with characters that are special in JavaScript string literals (', ", \ and various control codes) or the enclosing HTML file (</script>). Again, maybe this won't matter for the specific values you have here, but in general this stuff is the source of many security-sensitive escaping problems.

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

这篇关于使用jQuery / Json将值加载到HTML选择中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！