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


Posted in Javascript onDecember 02, 2015

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
javascript中的几个运算符
Jun 29 Javascript
JavaScript 高级语法介绍
Jun 15 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
通过jQuery源码学习javascript(三)
Dec 27 Javascript
如何使用jQUery获取选中radio对应的值(一句代码)
Jun 03 Javascript
JavaScript实现仿网易通行证表单验证
May 25 Javascript
js时间查询插件使用详解
Apr 07 Javascript
Vue网页html转换PDF(最低兼容ie10)的思路详解
Aug 24 Javascript
Vue-cli3简单使用(图文步骤)
Apr 30 Javascript
vue实现分页加载效果
Dec 24 Javascript
jQuery简单实现input文本框内灰色提示文本效果的方法
Dec 02 #Javascript
jquery实现简单文字提示效果
Dec 02 #Javascript
分享15个大家都熟知的jquery小技巧
Dec 02 #Javascript
jQuery实现为控件添加水印文字效果(附源码)
Dec 02 #Javascript
jqGrid中文文档之选项设置
Dec 02 #Javascript
javascript实现自动填写表单实例简析
Dec 02 #Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
Dec 02 #Javascript
You might like
php按百分比生成缩略图的代码分享
2014/05/10 PHP
Thinkphp整合微信支付功能
2016/12/14 PHP
php与c 实现按行读取文件实例代码
2017/01/03 PHP
php中各种定义变量的方法小结
2017/10/18 PHP
使用TextRange获取输入框中光标的位置的代码
2007/03/08 Javascript
date.parse在IE和FF中的区别
2010/07/29 Javascript
jQuery实现彩带延伸效果的网页加载条loading动画
2015/10/29 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
继续学习javascript闭包
2015/12/03 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
angularjs项目的页面跳转如何实现(5种方法)
2017/05/25 Javascript
微信小程序中添加客服按钮contact-button功能
2018/04/27 Javascript
前端vue-cli项目中使用img图片和background背景图的几种方法
2019/11/13 Javascript
JS中间件设计模式的深入探讨与实例分析
2020/04/11 Javascript
[01:14]DOTA2亚洲邀请赛小组赛赛前花絮
2017/03/27 DOTA
[42:25]EG vs Spirit Supermajor 败者组 BO3 第二场 6.4
2018/06/05 DOTA
python绘制简单折线图代码示例
2017/12/19 Python
Python3爬虫学习之MySQL数据库存储爬取的信息详解
2018/12/12 Python
python里dict变成list实例方法
2019/06/26 Python
django 控制页面跳转的例子
2019/08/06 Python
Python调用.NET库的方法步骤
2019/12/27 Python
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
拉斯维加斯城市观光通行证:Las Vegas Pass
2019/05/21 全球购物
德国家具购物网站:Möbel Höffner
2019/08/26 全球购物
好的自荐信的要求
2013/10/30 职场文书
小区门卫工作职责
2013/12/14 职场文书
毕业生个人求职信范文分享
2014/01/05 职场文书
十佳教师事迹材料
2014/01/11 职场文书
应聘医药销售自荐书范文
2014/02/08 职场文书
初中英语演讲稿
2014/04/29 职场文书
煤矿安全知识竞赛活动总结
2014/07/07 职场文书
上课说话检讨书
2015/01/27 职场文书
护士自荐信范文
2015/03/25 职场文书
幼儿园小班班务总结
2015/08/03 职场文书
Win11怎么把合并的任务栏分开 Win11任务栏合并分开教程
2022/04/06 数码科技