Javascript 如何从JSON数组中获取数据并将其放入listview?
您好,我是javascript编程新手,我在jquery mobile中创建了一个下拉列表viewpicker视图,我创建了一个json数组,以便数据位于该picker视图中。问题是,我需要代码,当我点击一个特定的列表视图时,它应该运行一个js函数,从json数组中获取数据,并将其放在pickerlist视图中。 我的html代码是:Javascript 如何从JSON数组中获取数据并将其放入listview?,javascript,jquery-mobile,Javascript,Jquery Mobile,您好,我是javascript编程新手,我在jquery mobile中创建了一个下拉列表viewpicker视图,我创建了一个json数组,以便数据位于该picker视图中。问题是,我需要代码,当我点击一个特定的列表视图时,它应该运行一个js函数,从json数组中获取数据,并将其放在pickerlist视图中。 我的html代码是: <form method="get" name="datarange"> <div data-role="fieldcontain">
<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>
如果您按照其他一些答案的解释正确插入了dom,那么问题可能仍然是jQueryMobile没有修改dom以便它根据jQueryMobile样式表进行呈现。这是因为jquerymobile只在加载页面时进行这种转换 然而,jquerymobile确实提供了一种方法来修改通过javascript函数插入dom的内容。此方法是触发器“create”。您需要选择已使用$插入dom的元素,然后按以下方式调用触发器:
$("css selector for the element").trigger('create')
应用于day dropbox的操作如下:
$("#number").trigger('create')
$(document).ready(function () {
dayLoad();
});
比如:
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" );
}
只需遍历数据,json JavaScript对象表示法就是JavaScript:
function dayLoad() {
for (var key in day) {
$('#number').append($("<option/>", {
value: key,
text: day[key].dayTime
}));
}
}
[更新见@Calavow评论]
对于移动设备使用$document.bind'pageinit',而不是$document.ready我不会使用$document.ready。。。在jQueryMobile中,您的数据似乎格式不正确,例如,不确定为什么您的时间有PM键-当它变为AM时不方便。函数appendNodes取3个变量;target是要将数据附加到哪个元素,data是要迭代的json数组,key是数据中的奇怪key,例如:day。
function dayLoad() {
$.each(day, function (key, value) {
$('#number')
.append($("<option></option>")
.attr("value", key)
.text(value.dayTime));
});
}
$(document).ready(function () {
dayLoad();
});