如何從JSON數組中抓取數據並放入列表視圖？

Question

嗨，我是新來的JavaScript編程，我做了一個下拉列表視圖（選擇器視圖）在jquery移動，數據要在該選擇器視圖我創建了一個JSON數組。問題是我需要代碼，當我點擊一個特定的列表視圖時，它應該運行一個js函數，它從json數組中抓取數據並將其放入選擇器（列表）視圖中。 我的HTML代碼：

<form method="get" name="datarange"> 
    <div data-role="fieldcontain"> 
    <select id="number" name="day you need" onclick="dayLoad();"> 
     <option value="select-value" selected="selected" >--Select Day--</option> 
     <option value="01">/* here i want my data from array "day"/*</option> 
     <option value="02">/* here i want my data from array "day"/*</option> 
    </select> 
    </div> 
    <div data-role="fieldcontain"> 
    <select id="time" name="time you need"> 
     <option value="select-value" selected="selected">--Select Time--</option> 
     <option value="101">/* here i want my data from array "Time" /*</option> 
     <option value="102">/* here i want my data from array "Time"/*</option> 
     <option value="103">/* here i want my data from array "Time"/*</option> 
     <!-- etc. --> 
     <option value="116">/* here i want my data from array "Time"/*</option> 
    </select> 
    </div> 
    <div data-role="fieldcontain"> 
    <select id="pid" name="pid you need"> 
     <option value="select-value" selected="selected">--No PID allocation found--</option> 
     <option value="301">/* here i want my data from array "pid"/*</option> 
     <option value="302">/* here i want my data from array "pid"/*</option> 
    </select> 
    </div> 
    <div data-role="fieldcontain"> 
    <select id="jus" name="justification you need"> 
     <option value="select-value" selected="selected">--Select Justification--</option> 
     <option value="201">Project Work</option> 
     <option value="202">Client Call</option> 
     <option value="203">Team Meeting<option> 
     <option value="204">Others</option> 
    </select> 
    </div> 
</form> 
<div id="display" class="rss-box"></div> 

在我的js文件：

var day=[ 
     {"dayTime" : "Today-Drop"}, 
     {"dayTime" : "Tomorrow-Pick up"}]; 
var time=[ 
     {"PM" : "3:00 PM"}, 
     {"PM" : "4:00 PM"}, 
     {"PM" : "7:30 PM"}, 
     {"PM" : "9:00 PM"}, 
     {"PM" : "10:15 PM"}, 
     {"PM" : "11:00 PM"}]; 

var Pid=[ 
     {"pidno" : "7813"}, 
     {"pidno" : "8133"},]; 


function dayLoad(){//i need the code to put in this function which grabs the data from array and gonna put into the listview} 

Answer 1

如果要插入正確，通過一些其他的答案的解釋，問題可能仍然是jQuery Mobile的不修改dom，以便根據jquery移動樣式表進行渲染。發生這種情況是因爲jquery mobile在加載頁面時僅進行這種轉換。

然而，jquery mobile確實提供了一種方法來修改插入到dom中的javascript函數的內容。這種方法是觸發（'創建'）。您需要選擇已插入到$的DOM元素，然後在下面的方式調用觸發：

$("css selector for the element").trigger('create') 

應用到一天的Dropbox這將這樣進行：

$("#number").trigger('create') 

Answer 2

喜歡的東西：

function appendNodes(target, data, key) { 
    var div = document.getElementById(target); 
    for (var i = 0; i < data.length; i++) { 
     var option = document.createElement("option"); 
     option.appendChild(document.createTextNode(data[i][key])) 
     option.value = i; 
     div.appendChild(option); 
    } 
} 

function dayLoad(){ 
    appendNodes("number", day, "dayTime"); 
    appendNodes("time", time, "PM"); 
    appendNodes("pid", Pid, "pidno"); 
}