Question

我正在尝试使用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);
       })
   });

Answer 1

你的for循环中应该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字符串文字特有的字符问题（{ {1}}，'，"和各种控制代码）或封闭的HTML文件（\）。同样，也许这对你在这里的具体价值无关紧要，但总的来说，这些东西是许多安全敏感的逃避问题的根源。

</script>

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

2 个答案: