jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
2016-06-16 19:32
986 查看
从后台获取json数据,将内容填充到下拉列表,代码非常简单,具体过程请看下面代码。
需求:url:链接 par:ID sel:下拉列表选择器
需求:url:链接 par:ID sel:下拉列表选择器
function BuildSelectBox(url, par, sel) { $(sel).empty(); $.getJSON(url, { id: par }, function (json, textStatus) { for (var i = json.length - 1; i >= 0; i--) { $(sel).prepend('<option value="' + json[i].Id + '">' + json[i].Name + '</option>') }; $(sel).prepend('<option value="0">请选择</option>') }); }
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="JS/jquery-1.8.0.min.js" type="text/javascript"></script> <script type="text/javascript"> $(function () { var parameter = {}; $.ajax({ url: 'jsondata.ashx', type: 'GET', dataType: 'json', data: parameter, timeout: 1000, cache: false, beforeSend: LoadFunction, //加载执行方法 error: erryFunction, //错误执行方法 success: succFunction //成功执行方法 }) function LoadFunction() { $("#list").html('加载中...'); } function erryFunction() { alert("error"); } function succFunction(tt) { $("#list").html(''); //eval将字符串转成对象数组 //var json = { "id": "10086", "uname": "zhangsan", "email": "zhangsan@qq.com" }; //json = eval(json); //alert("===json:id=" + json.id + ",uname=" + json.uname + ",email=" + json.email); var json = eval(tt); //数组 $.each(json, function (index, item) { //循环获取数据 var name = json[index].Name; var idnumber = json[index].IdNumber; var sex = json[index].Sex; $("#list").html($("#list").html() + "<br>" + name + " - " + idnumber + " - " + sex + "<br/>"); }); } }); </script> </head> <body> <ul id="list"> </ul> </body> </html>
相关文章推荐
- 86---- jQuery与Struts2 -stream方式以及json方式详细讲解
- 【JQuery】用JQuery来监听浏览器改变窗口大小事件
- zepto和jquery的区别,zepto的不同使用8条小结
- jQuery的height、innerHeight、outerHeight三者的区别
- jquery 日历插件datepicker格式调整
- jQuery+css3 弹幕
- jquery radio 总结
- 树checkbox选择jquery实例
- 树checkbox选择jquery实例
- jquery实现简单Tab切换菜单效果
- jQuery选择器总结
- JQuery DOM
- jquery+DOM实现表格拖选,使checkbox选中
- [jQuery]最新的 3.0 已发布
- jQuery - jQuery的$.extend和$.fn.extend作用及区别
- jquery通过class多级选择
- jquery中的$("#id")与document.getElementById("id")的区别
- JQuery easyui Datagrid 分页事件
- jQuery插件treeview点击节点名称不展开、收缩节点
- jQuery使用each方法与for语句遍历数组示例