请问一个jQuery数据绑定的有关问题-JavaSript-爱易网页

请问一个jQuery数据绑定的有关问题

日期：2014-05-16　浏览次数：20416 次

请教一个jQuery数据绑定的问题
有这样一组JSON数据
{total: 0,page: 1,records: 8,
rows :
[ {id:'1', cell:[ '1','1','00000','集团公司','' ] },
{id:'2', cell:[ '2','1','00001','分公司1','' ] },
{id:'3', cell:[ '3','1','00002','分公司2','' ] },
{id:'4', cell:[ '4','1','00003','分公司3','' ] },
{id:'5', cell:[ '5','2','RD.','研发部','' ] },
{id:'6', cell:[ '7','2','PRD','生产部','' ] },
{id:'7', cell:[ '8','2','PMC','PMC','' ] }
]
}
现在想将这一组数据与页面上所有具有dept样式的select控件绑定,让select下拉框显示成
00000 集团公司
00001 分公司1
00002 分公司2
00003 分公司3
RD. 研发部
PRD 生产部
....
应该怎么做啊?

------解决方案--------------------

HTML code


<!DOCTYPE html>
    <head>
        <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" />
        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                var data = {total: 0,page: 1,records: 8,  
                        rows :  
                          [ {id:'1', cell:[ '1','1','00000','集团公司','' ] },
                          {id:'2', cell:[ '2','1','00001','分公司1','' ] },
                          {id:'3', cell:[ '3','1','00002','分公司2','' ] },
                          {id:'4', cell:[ '4','1','00003','分公司3','' ] },
                          {id:'5', cell:[ '5','2','RD.','研发部','' ] },
                          {id:'6', cell:[ '7','2','PRD','生产部','' ] },
                          {id:'7', cell:[ '8','2','PMC','PMC','' ] }
                          ]
                     };
                var s = $('.dept');
                $.each(data.rows,function(i,o) {
                    var option = $('<option></option>');
                    option.text(data.rows[i].cell[2] + ' ' + data.rows[i].cell[3]);
                    s.append(option);
                });
            })
        </script>
    </head>
    <body>
        <select class="dept"></select>
    </body>
</html>

------解决方案--------------------

HTML code<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>

    <script src="Js/jQuery/jquery-1.6.2.min.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {
            var myJson = { total: 0, page: 1, records: 8,
                rows:
              [{ id: '1', cell: ['1', '1', '00000', '集团公司', ''] },
              { id: '2', cell: ['2', '1', '00001', '分公司1', ''] },
              { id: '3', cell: ['3', '1', '00002', '分公司2', ''] },
              { id: '4', cell: ['4', '1', '00003', '分公司3', ''] },
              { id: '5', cell: ['5', '2', 'RD.', '研发部', ''] },
              { id: '6', cell: ['7', '2', 'PRD', '生产部', ''] },
              { id: '7', cell: ['8', '2', 'PMC', 'PMC', ''] }
              ]
            };
            for (var i = 0; i < myJson.rows.length; i++) {
                $(".dept").append("<option value='" + myJson.rows[i].cell[2] + "'>" + myJson.rows[i].cell[2] + " " + myJson.rows[i].cell[3] + "</option>");

            }
        });
    
    </script>

</head>
<body>
    <select class="dept">
    </select><br />
    <select class="dept">
    </select>
</body>
</html>

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

请问一个jQuery数据绑定的有关问题

相关资料更多>

推荐阅读更多>