Question

我是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;  

 ?>

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

Answer 1

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

尝试通过attr('value', someValue)设置OPTION值。我也认为你对对象（“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);
    });

更多日志记录，并指定重复使用的主要＆amp;中间变量（性能，以及你可以记录/调试它们）也是一件好事。

Answer 2

您正在尝试访问其中obj[nameattr]为国家/地区的nameattr。如果您发现，则obj

没有属性

我建议使用for in循环代替$.each

for(var key in data) {
    $(selobj).append($('<option></option>').val(key).html(data[key]));
}

Answer 3

我会说得很简单：

    $.each(data, function(i,obj)
    {
       $(selobj).append('<option value="' + obj[nameattr] +'">' + obj[nameattr] + '</option>');
    });

JQuery $ .getJSON调用不格式化下拉列表

3 个答案: