简体   繁体   English

json文件中的select标签中的列表选项

[英]List option in the select tag from json file

What I want to do is: As you can see from the ajaxTest.html, there is a <select id="sel1"> tag. 我想做的是:正如从ajaxTest.html看到的那样,有一个<select id="sel1">标记。 I want the option value becomes Test1 Test2 Test3 . 我希望选项值变为Test1 Test2 Test3 which can be retrieved from the json file..how can I do that? 可以从json文件中检索出来。 ajaxTest.html 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 list.json

{
    "loginid":"nurwafiqa",
    "password":"welcome123",
    "acclist":[
        {
            "acctype":"Test1",
            "name":"Wafiqa"
        },
        {
            "acctype":"Test2",
            "name":"Wafiqa"
        },
        {
            "acctype":"Test3",
            "name":"Wafiqa"
        }
    ]
}
//...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);
    }
}

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM