请教一个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 生产部
....
应该怎么做啊?
[解决办法]
<!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 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>