Question

我开发了一个脚本，它使用$ .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>

Answer 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 =您要添加的选项的名称（用户看到的内容）

Answer 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属性。这就是你要找的东西吗？

Answer 3

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

myarray.push(j.options);

Answer 4

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

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

4 个答案: