使用json數據動態生成下拉列表？

我已經開發出使用$ .getJSON PHP腳本接收JSON數據的腳本。 JSON數據看起來像 '[{ 「選項」：「smart_exp」}，{ 「選項」：「user_intf」}，{ 「blahblah」「選項」}]'使用json數據動態生成下拉列表？

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

來源

2010-10-21 XCeptable

首先，.getJSON()使用回調，這意味着作爲.getJSON()第二個參數執行的代碼不一定會一直是選項的名稱由你的01時間調用循環運行。一旦服務器迴應你的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財產。那是你在找什麼？

來源

2010-10-21 20:18:48 clarkf

Grate，ur grate ...... thanX a許多。它的工作現在與我們的代碼。一個問題是它只能在IE瀏覽器中運行，不能在Firefox中運行。我認爲我需要做// $（'document'）。ready（function（）工作，因爲我無法修復它，所以現在在我的代碼中進行了評論。你能否看到它，我認爲它只會引起問題。可以告訴我更多的事情，可以純淨的，即JS渲染引擎在這種情況下使用。假如我沒有任何有關JS渲染引擎的信息。比X再次clarkf :-) - – XCeptable 2010-10-21 20:37:14

@babar - I'我不確定你在問什麼。如果你問純粹的模板庫（http://beebole.com/pure/），當然可以在這裏使用它。您需要在PHP腳本中稍微修改一下JSON數據（我認爲，我不熟悉純文本）。查看文檔？ – clarkf 2010-10-21 20:43:47

我看到的一個問題是，在您的每個循環中，您只是將j.options分配給myarray，而不是將其添加到數組中。更改爲：

myarray.push(j.options);

來源

2010-10-21 19:57:48 mbrevoort

我不知道你的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 =您要添加（用戶看到）

來源

2010-10-21 20:08:28 lamarant

它看起來像[{「options」：「smart_exp」}，{「options」：「user_intf」}，{「options」：「blahblah」}] – XCeptable 2010-10-21 20:17:51

的Internet Explorer/Firefox的問題可能是由於該網頁的編碼類型 - 建議嘗試UTF-8。

來源

2012-05-14 20:50:01

使用json數據動態生成下拉列表？

回答

相關問題