使用 json 数据动态生成下拉列表？答案

【问题标题】：Dynamically generating a dropdown using json data?使用 json 数据动态生成下拉列表？
【发布时间】：2010-10-21 19:40:38
【问题描述】：

我开发了一个脚本，它使用 $.getJSON 从 php 脚本接收 json 数据。 JSON 数据看起来像 '[{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}] '

<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
//$('document').ready(function() { 

function Preload() {
  $.getJSON("http://localhost/conn_mysql.php", function(jsonData){  
  $.each(jsonData, function(i,j)
  { alert(j.options);});
});} 

// });

</script></head>
<body onLoad="Preload()">
</body>
</html>

我还开发了一个使用数组动态生成下拉列表的脚本。

<HTML>
<HEAD>
<script language="javascript">
var myarray = new Array("apples","oranges","bananas","Peac");
function populate()
{ for (i=0; i<myarray.length; i++)
{
document.form1.fruits.options[i]=new Option(myarray[i], i);
}
}
</script>
</HEAD>
<body onload="populate();">
<form name="form1">
My favourite fruit is :
<select name="fruits" />
</form>
</body>
</HTML>

现在我需要使用 getJson 返回的数据动态构建一个下拉列表，但我在合并两者时遇到了麻烦。我将非常感谢您的帮助。这是我尝试做的，但它不起作用。

    <html>
    <head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript" language="javascript">
    //$('document').ready(function() { 

    function Preload() {
    var myarray = new Array();
    $.getJSON("http://localhost/conn_mysql.php", function(jsonData){  
    $.each(jsonData, function(i,j)
    { myarray = j.options;});});
    for (i=0; i<myarray.length; i++)
    { document.form1.fruits.options[i]=new Option(myarray[i]); } 
    } 
    // });
   </script></head>
   <body onLoad="Preload()">
   <form name="form1">
   My favourite fruit is :
   <select name="fruits" />
   </form>
   </body>
   </html>

【问题讨论】：

标签： javascript arrays json dynamic drop-down-menu

【解决方案1】：

我不确定你的 json 数据是什么样的，但也许你需要这样的东西：

function Preload() {
  $.getJSON("http://localhost/conn_mysql.php", function(jsonData){  
    $.each(jsonData, function(i,j){ 
      $('#ID-OF-YOUR-SELECT-ELEMENT').append(
        $('<option></option>').val(j.value).html(j.text)
      );
    }
  );
});}

j.value = 要添加的选项的值 j.text = 您要添加的选项的名称（用户看到的）

【讨论】：

看起来像 [{"options":"smart_exp"},{"options":"user_intf"},{"options":"blahblah"}]

【解决方案2】：

首先，.getJSON() 使用回调，这意味着作为.getJSON() 的第二个参数执行的代码在for 循环运行时不一定会被调用。一旦服务器响应您的conn_mysql.php JSON 数据，它就会运行。尝试嵌套它：

function Preload() {
    $.getJSON("http://localhost/conn_mysql.php", function (jsonData) {
        $.each(jsonData, function (i, j) {
            document.form1.fruits.options[i] = new Option(j.options);
        });
    });
}

您应该了解jsonData 的结构。在这里，这只有在结构是这样的情况下才有效：

[
    { options: "item 1" },
    { options: "item 2" },
    { options: "item 3" },
]

它遍历整个对象，查找数组的每个元素，然后查找该元素的options 属性。这就是你要找的吗？

【讨论】：

炉排，你的炉排......比X很多。它现在使用您的代码。一个问题是它目前只能在 IE 中工作，不能在 Firefox 中工作。我想我需要让 //$('document').ready(function() 工作，因为我无法修复它，所以现在在我的这段代码中进行了注释。你能看到它吗，我认为它只有大括号问题. 你能再告诉我一件事吗，在这种情况下可以使用 PURE 即 JS 渲染引擎。前提是我到目前为止还没有关于 JS 渲染引擎的信息。thanX 又一千次 clarkf :-) –
@babar - 我不确定你在问什么。如果您要询问纯模板库 (beebole.com/pure)，当然可以在这里使用它。您需要在 PHP 脚本中稍微修改一下您的 JSON 数据（我想，我对 pure 不熟悉）。查看文档？

【解决方案3】：

我看到的一个问题是，在每个循环中，您只是将 j.options 分配给 myarray 而不是将其添加到数组中。改为：

myarray.push(j.options);

【讨论】：

【解决方案4】：

由于页面编码类型，Internet Explorer / Firefox 可能出现问题 - 建议尝试 utf-8。

【讨论】：