0

我是 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 文件： 

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

 ?>

我需要做什么才能获得正常的下拉菜单？提前谢谢了。

4

3 回答 3

1

您正在尝试访问obj[nameattr]哪个nameattr国家/地区。如果您注意到，您的财产没有obj

我可以建议使用for in循环而不是$.each

for(var key in data) {
    $(selobj).append($('<option></option>').val(key).html(data[key]));
}
于 2013-07-16T09:50:12.397 回答
1

我认为 val() 不适用于<option>标签；它是获取/设置控件的值，例如 SELECT 或 INPUT，而不是真正编辑选项。

尝试通过设置 OPTION 值来attr('value', someValue)代替。我还认为您对对象（“地图”）上的 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);
    });

更多的日志记录，并分配主要的重复使用和中间变量（都是为了性能，所以你可以记录/调试它们）也是一件好事。

于 2013-07-16T09:47:43.247 回答
0

我会简单点：

    $.each(data, function(i,obj)
    {
       $(selobj).append('<option value="' + obj[nameattr] +'">' + obj[nameattr] + '</option>');
    });
于 2013-07-16T09:51:55.963 回答