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

前端技术 2023/09/07 JavaScript

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

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

url:/hello

返回类似：

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

这样的json数据

html:

按钮：<input type=\"button\" id=\"btn\" value=\"按 钮\" />

下拉列表：<select id=\"sel\"></select>

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程序设计有所帮助。

本文地址：https://www.stayed.cn/item/17773

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案