JQuery $.getJSON call not formatting下拉列表
JQuery $.getJSON call not formatting下拉列表
提问于 2013-07-16 17:43:31
我是ajax调用的新手，正在尝试让一个简单的示例工作，以填充国家/地区下拉列表。我已经验证了我正在从调用中获取数据，但在实际填充下拉列表时遇到了问题。
下面是html：
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
function loadlist(selobj,url,nameattr)
{
$(selobj).empty();
$.getJSON(url,{},function(data)
{
$.each(data, function(i,obj)
{
$(selobj).append($('<option></option>').val(obj[nameattr]).html(obj[nameattr]));
});
});
}
$(function()
{
loadlist($('select#country').get(0), 'http://127.0.0.1/country1.php','country');
});
</script>
</head>
<body>
Country:<select name='country' id='country' size='1'></select>
</body>
</html>下面是country1.php 1.php文件：
<?php
header('Access-Control-Allow-Origin: *');
header('Content-type: application/json');
$output = '{
" " : " ",
"US" : "United States",
"AF" : "Afghanistan",
"AL" : "Albania",
"DZ" : "Algeria",
"AS" : "American Samoa",
"AD" : "Andorra",
"AO" : "Angola",
...
"ZM" : "Zambia",
"ZW" : "Zimbabwe" }';
echo $output;
?> 我需要做什么才能得到一个正常的下拉列表？在此之前，非常感谢您。
回答 3
Stack Overflow用户
回答已采纳
发布于 2013-07-16 17:47:43
我不认为val()适用于<option>标记；它用于获取/设置控件的值，例如SELECT或INPUT，而不是真正编辑选项。
请尝试通过attr('value', someValue)设置选项值。我还认为您对对象("map")使用jQuery.each()的期望是错误的。
如果上面的代码大部分都在工作：
var dest = $(selobj);
console.log('populating data to options', data, dest.length);
$.each( data, function(key,value) {
console.log(' option', key, value);
var el = $('<option></option>')
.attr('value', key)
.html( value);
dest.append( el);
});更多的日志记录，以及分配主要的重复使用的变量和中间变量(两者都是为了性能，所以您可以记录/调试它们)也是一件好事。
Stack Overflow用户
发布于 2013-07-16 17:50:12
您正在尝试访问nameattr为国家/地区的obj[nameattr]。如果您注意到，您的obj没有任何属性
我可以建议用for in循环代替$.each吗？
for(var key in data) {
$(selobj).append($('<option></option>').val(key).html(data[key]));
}Stack Overflow用户
发布于 2013-07-16 17:51:56
我会让它变得简单：
$.each(data, function(i,obj)
{
$(selobj).append('<option value="' + obj[nameattr] +'">' + obj[nameattr] + '</option>');
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/17673158
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号