Home  >  Article  >  Web Front-end  >  jquery实现触发时更新下拉列表内容的方法_jquery

jquery实现触发时更新下拉列表内容的方法_jquery

WBOY
WBOYOriginal
2016-05-16 15:28:081528browse

本文实例讲述了jquery实现触发时更新下拉列表内容的方法。分享给大家供大家参考,具体如下:

服务端假如有个请求地址用来返回所需数据

url:/hello

返回类似:

复制代码 代码如下:
[{"西瓜":10},{"苹果":12},{"香蕉":13},{"芒果":14}]

这样的json数据

html:

按钮:

下拉列表:

js代码:

$(function(){
  $("#btn").click(
   $.ajax({
  type:"POST",
  url:"http://localhost/XXXX/Test",
  cache: false,//不缓存
  dataType:"json",//返回数据格式
  success:function(ret){ 
    $("#sel").empty(); 
    $.each(ret,function(ind){
    for(var key in ret[ind]){
      var opt = $("<option></option>");
     opt.val(ret[ind][key]);
    opt.text(key);
    $("#sel").append(opt);
   }
  });
   }
 });
 );
});

希望本文所述对大家jQuery程序设计有所帮助。

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn