javascript - jquery在文档加载时加载json

Question

我很困惑为什么我的这个简单代码是错误的。

我只想在加载文档时在选择中列出 json 数据。这是我的jQuery代码：

<script>
$(document).ready(function(){
        $("#choose").load(function(event){
            $.getJSON('data/colors.json', function(jd) {
                $('#choose').html('<option value="' + jd.name'">' + jd.name + '</option>');
                $('#choose').append('<option value="' + jd.name'">' + jd.name + '</option>');
            });
        });
   });
</script>

这是我的html：

<select id="choose" style="width:200px">

   </select>

最后这是我的 json 文件：

[
{
"name": "Yoza",
"age" : "22",
"sex": "male"
},
{
"name": "nayla",
"age" : "18",
"sex": "female"
}
]

如何加载每个json。所以我可以加载更多的数据。

Answer 1

尝试

$(function(){

    $.getJSON('data.json', function(jd) {
        $.each(jd, function(i, v){
            $('#choose').append('<option value="' + v.name + '">' + v.name + '</option>');
        })
    })

});

演示：小提琴

Answer 2

Try this

      var data = [];

    $.getJSON( 'data/colors.json', function( jd ) {

          $.each( jd, function( k,v ){

              data.push('<option value="' + v.name'">' + v.name + '</option>');

             });
            $('#choose').append( data.join('') );
        });

Answer 3

why do you wait for $('#choose') to be loading ? Your function is executed when document is ready, so $('#choose') is ready too.