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 未结束的字符串常量错误解决方法
Jun 13 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
JS简单实现数组去重的方法示例
Mar 27 Javascript
JS基于正则实现数字千分位用逗号分隔的方法
Jun 16 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
JavaScript设计模式之调停者模式实例详解
Feb 03 Javascript
Vue.js最佳实践(五招助你成为vuejs大师)
May 04 Javascript
vue项目搭建以及全家桶的使用详细教程(小结)
Dec 19 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
原生js+canvas实现验证码
Nov 29 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
星际玩家的三大定律
2020/03/04 星际争霸
phpmyadmin 访问被拒绝的真实原因
2009/06/15 PHP
php数组函数序列之array_combine() - 数组合并函数使用说明
2011/10/29 PHP
解析John Resig Simple JavaScript Inheritance代码
2012/12/03 Javascript
jquery监听div内容的变化具体实现思路
2013/11/04 Javascript
jquery禁止输入数字以外的字符的示例(纯数字验证码)
2014/04/10 Javascript
网页下载文件期间如何防止用户对网页进行其他操作
2014/06/27 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
js实现简易垂直滚动条
2017/02/22 Javascript
Bootstrap的popover(弹出框)2秒后定时消失的实现代码
2017/02/27 Javascript
老生常谈js中0到底是 true 还是 false
2017/03/08 Javascript
Vue-cli中为单独页面设置背景色的实现方法
2018/02/11 Javascript
JS实现判断图片是否加载完成的方法分析
2018/07/31 Javascript
Node.js 使用axios读写influxDB的方法示例
2018/10/26 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
Vue.js中provide/inject实现响应式数据更新的方法示例
2019/10/16 Javascript
jQuery实现小火箭返回顶部特效
2020/02/03 jQuery
[01:10]DOTA2次级职业联赛 - Fly战队宣传片
2014/12/01 DOTA
横向对比分析Python解析XML的四种方式
2016/03/30 Python
python解决Fedora解压zip时中文乱码的方法
2016/09/18 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
Python绘制组合图的示例
2020/09/18 Python
python logging模块的使用详解
2020/10/23 Python
KIKO美国官网:意大利的平价彩妆品牌
2017/05/16 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
电话销售经理岗位职责
2013/12/07 职场文书
商务会议邀请函
2014/01/09 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
2015年终个人政治思想工作总结
2015/11/24 职场文书
初三化学教学反思
2016/02/22 职场文书
浅谈node.js中间件有哪些类型
2021/04/29 Javascript
Python实现视频中添加音频工具详解
2021/12/06 Python
Java 异步任务计算FutureTask
2022/04/28 Java/Android