用json数据填充下拉列表
Populate dropdown with json data
我正在尝试从JSON页面填充数据下拉框。
下面是我使用的代码:<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$.ajax({
url: "json/wcf.svc/GetTax",
dataType: 'json',
data: data
});
$($.parseJSON(data.msg)).map(function () {
return $('<option>').val(this.value).text(this.label);
}).appendTo('#taxList');
});
</script>
json数据返回:
{"d":"{'"16'":'"hello'",'"17'":'"world'"}"}
我得到一个错误,"数据是未定义的。"我是否需要告诉JQ如何读取json数据?
首先,您传递给ajax调用的数据变量没有定义(好吧,不是在您提供的代码示例中),其次,ajax调用是异步发生的,所以您需要对返回的数据做一些事情,即通过成功回调。例子:
$(document).ready(function () {
var data = //define here
$.ajax({
url: "json/wcf.svc/GetTax",
dataType: 'json',
data: data, // pass it in here
success: function(data)
{
$(data.msg).map(function () {
return $('<option>').val(this.value).text(this.label);
}).appendTo('#taxList');
}
});
});
也不需要解析ajax调用返回的数据,因为jQuery会自动为您解析JSON,(应该需要$.parseJSON(data.msg))
编辑
基于JSON的有趣格式,并假设它不能被更改,这应该可以工作(尽管很难看)
$(document).ready(function () {
var data = //define here
$.ajax({
url: "json/wcf.svc/GetTax",
dataType: 'json',
data: data, // pass it in here
success: function(data)
{
data = data.d.replace(/{/g, '').replace(/}/g, '').split(',');
var obj = [];
for (var i = 0; i < data.length; i++) {
obj[i] = {
value: data[i].split(':')[0].replace(/"/g, '').replace('''', ''),
label: data[i].split(':')[1].replace(/"/g, '')
};
}
var htmlToAppend = "";
for (var j = 0; j < obj.length; j++) {
htmlToAppend += '<option value="' +
obj[j].value +
'">' + obj[j].label +
'</option>';
}
$('#taxList').append(htmlToAppend);
}
});
});
您需要使用success
选项返回数据。
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$.ajax({
url: "json/wcf.svc/GetTax",
dataType: 'json',
success: function(data){
$(data.msg).map(function () {
return $('<option>').val(this.value).text(this.label);
}).appendTo('#taxList');
}
});
});
</script>
相关文章:
- 用每小时的差值填充数组/列表-从下拉列表中给定两个时间值
- PHP下拉列表由要使用javascript的数据库填充
- 使用两个下拉列表的值填充文本框
- 根据url填充表单选择下拉列表
- 无法使用国家/地区选择中的状态动态填充下拉列表
- 使用javascript填充Codeigniter(表单助手)-下拉列表
- 通过使用AngularJs进行分组来填充下拉列表
- 从填充了 AJAX 的下拉列表中获取控制器的操作方法中的值
- 动态下拉列表选项在添加多列后未填充
- 如何从 API 填充数据并加载到下拉列表中
- 由vbscript下拉列表填充的经典asp-javascript数组
- 使用 ajax 和 JSP Servlet 根据选择的上一个下拉列表填充下拉列表
- 根据 Wordpress 页面中的第一个下拉列表填充第二个下拉列表
- 用下拉列表填充数字数组
- 根据选择的其他下拉列表填充一个下拉列表
- 根据下拉列表填充和禁用文本字段
- 用下拉列表填充HTML页面
- 如何使用下拉列表填充文本框
- 根据上一个下拉列表填充下拉列表
- 使用已填充下拉列表填充文本框