Question

我想做的是：正如您在ajaxTest.html中看到的，有一个<select id="sel1">标记。我希望选项值变为Test1 Test2 Test3。可以从json文件中检索。我可以这样做吗？ ajaxTest.html

<!DOCTYPE html>
<html>
<head>
    <script src="js/jquery-1.7.1.min.js"></script>
    <script src="js/jquery-ui.js"></script>
</head>
<body>
    <p>Username:</p>
    <div id="uname"></div>
    <p>Password:</p>
    <div id="pword"></div>
    <p>Account Information</p>
    <div id="accnum1"></div>
    <div id="regdate1"></div>
    <div id="lastUpd1"></div>
    <p>Select acc type:</p><select id="sel1"></select>
    <script>
    $.ajax({
        type:"GET",
        datatype:"json",
        async:true,
        url:'ref/list.json',
        success:function(data){
        alert("Welcome "+data.password+data.loginid);
        console.log(data.password);
        $('#uname').html(data.loginid);
        $('#pword').html(data.password);
        }
    });

    $.ajax({
        type:"GET",
        datatype:"json",
        async:true,
        url:'ref/accinfo.json',
        success:function(data){
        console.log(data.accnum);
        $('#accnum1').html(data.accnum);
        $('#regdate1').html(data.regdate);
        $('#lastUpd1').html(data.lastUpd);
        }
    });
    </script>
</body>
</html>

list.json

{
    "loginid":"nurwafiqa",
    "password":"welcome123",
    "acclist":[
        {
            "acctype":"Test1",
            "name":"Wafiqa"
        },
        {
            "acctype":"Test2",
            "name":"Wafiqa"
        },
        {
            "acctype":"Test3",
            "name":"Wafiqa"
        }
    ]
}

Answer 1

//...your code
    success:function(data){
//loop thru the acclist array
    for (var i=0;i<data.acclist.length;i++)
    {
    //not sure what values you want in the option, here's a start
    var $option=$('<option />');
    $option.attr('value',data.acclist[i].acctype);
    $option.text(data.acclist[i].acctype);
    $('#sel1').append($option);
    }
}

从json文件中选择标记中的列表选项

1 个答案: