Javascript 使用json数据动态生成下拉列表？_Javascript_Arrays_Json_Dynamic_Drop Down Menu

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

javascript arrays json dynamic drop-down-menu

Javascript 使用json数据动态生成下拉列表？,javascript,arrays,json,dynamic,drop-down-menu,Javascript,Arrays,Json,Dynamic,Drop Down Menu,我开发了一个脚本，它使用$.getJSON从php脚本接收json数据。JSON数据看起来像“[{”选项“：“smart_exp”}，{”选项“：“user_intf”}，{”选项“：“blahblah”}” //$（'document'）.ready（函数（）{ 函数预加载（）{ $.getJSON（“http://localhost/conn_mysql.php“，函数（jsonData）{ $.each（jsonData，function（i，j） {alert（j.options）；}

我开发了一个脚本，它使用$.getJSON从php脚本接收json数据。JSON数据看起来像“[{”选项“：“smart_exp”}，{”选项“：“user_intf”}，{”选项“：“blahblah”}”


//$（'document'）.ready（函数（）{
函数预加载（）{
$.getJSON（“http://localhost/conn_mysql.php“，函数（jsonData）{
$.each（jsonData，function（i，j）
{alert（j.options）；}；
});} 
// });

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

<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>


var myarray=新数组（“苹果”、“橙子”、“香蕉”、“Peac”）；
函数填充（）
{for（i=0；i我看到的一个问题是，在each循环中，您只是将j.options分配给myarray，而不是将其添加到数组中。更改为：
myarray.push(j.options);

我不确定您的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)
      );
    }
  );
});}

函数预加载（）{
$.getJSON（“http://localhost/conn_mysql.php“，函数（jsonData）{
$.each（jsonData，function（i，j）{
$（'#ID-OF-YOUR-SELECT-ELEMENT'）。追加(
$（''）.val（j.value）.html（j.text）
);
}
);
});}

j、 value=要添加的选项的值
j、 text=要添加的选项的名称（用户看到的）
首先，.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
属性。这就是您要查找的吗？
由于页面编码类型，Internet Explorer/Firefox可能出现问题-建议尝试utf-8。它看起来像[{“选项”：“智能\u exp”}，{“选项”：“用户\u intf”}{“选项”：“blahblah”}]Grate，u r Grate…thanX很多。它现在可以与您的代码一起工作。一个问题是，到目前为止，它只在IE中工作，在firefox中不工作。我想我需要使/$（'document'）。就绪（函数（）在我的这段代码中，由于我无法修复它，所以现在对它进行了注释。你能看到它吗，我认为它只有大括号的问题。你能再告诉我一件事吗，在这种情况下可以使用纯JS渲染引擎吗？前提是我到目前为止没有关于JS渲染引擎的信息。thanX一千次clarkf:-）–@babar-我不知道你在问什么。如果你问的是纯模板库（），当然可以在这里使用。你需要在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);
        });
    });
}

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