jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表

最新推荐文章于 2021-08-06 18:53:02 发布

最是那一低头的温柔

最新推荐文章于 2021-08-06 18:53:02 发布

阅读量1w

点赞数 5

分类专栏： Javascript Jquery

Jquery 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

Javascript

17 篇文章 0 订阅

订阅专栏

从后台获取json数据，将内容填充到下拉列表，代码非常简单，具体过程请看下面代码。

需求：url:链接 par：ID sel：下拉列表选择器

web、JS技术学习 https://www.itkc8.com

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>

web、JS技术学习 https://www.itkc8.com