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 相关文章推荐
jquery分页插件AmSetPager(自写)
Apr 15 Javascript
js获取select标签的值且兼容IE与firefox
Dec 30 Javascript
Javascript变量的作用域和作用域链详解
Apr 02 Javascript
jQuery Ztree行政地区树状展示(点击加载)
Nov 09 Javascript
Angular2开发——组件规划篇
Mar 28 Javascript
详解如何在vue中使用sass
Jun 21 Javascript
浅谈js基础数据类型和引用类型,深浅拷贝问题,以及内存分配问题
Sep 02 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
JS基于设计模式中的单例模式(Singleton)实现封装对数据增删改查功能
Feb 06 Javascript
iphone刘海屏页面适配方法
May 07 Javascript
layui数据表格重载实现往后台传参
Nov 15 Javascript
Vue脚手架编写试卷页面功能
Mar 17 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
一个程序下载的管理程序(一)
2006/10/09 PHP
使用PHP破解防盗链图片的一个简单方法
2014/06/07 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
php验证码的制作思路和实现方法
2015/11/12 PHP
yii2.0数据库迁移教程【多个数据库同时同步数据】
2016/10/08 PHP
JObj预览一个JS的框架
2008/03/13 Javascript
JQuery this 和 $(this) 的区别
2009/08/23 Javascript
jquery.qrcode在线生成二维码使用示例
2013/08/21 Javascript
js脚本获取webform服务器控件的方法
2014/05/16 Javascript
快速学习jQuery插件 Cookie插件使用方法
2015/12/01 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
bootstrap多层模态框滚动条消失的问题
2017/07/21 Javascript
JavaScript内存泄漏的处理方式
2017/11/20 Javascript
setTimeout时间设置为0详细解析
2018/03/13 Javascript
@angular前端项目代码优化之构建Api Tree的方法
2018/12/24 Javascript
js+springMVC 提交数组数据到后台的实例
2019/09/21 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
[01:20]辉夜杯背景故事宣传片《辉夜传说》
2015/12/25 DOTA
[01:29:17]RNG vs Liquid 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
在Python中使用PIL模块对图片进行高斯模糊处理的教程
2015/05/05 Python
Python通过90行代码搭建一个音乐搜索工具
2015/07/29 Python
python使用epoll实现服务端的方法
2018/10/16 Python
python基础教程之while循环
2019/08/14 Python
FFrpc python客户端lib使用解析
2019/08/24 Python
IE9对HTML5中部分属性不支持的原因分析
2014/10/15 HTML / CSS
服装公司总经理岗位职责
2013/11/30 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
重大事项社会稳定风险评估方案
2014/06/15 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
学校三八妇女节活动总结
2015/02/06 职场文书
幼师求职自荐信
2015/03/26 职场文书
升学宴学生致辞
2015/07/27 职场文书
golang内置函数len的小技巧
2021/07/25 Golang
SQL中去除重复数据的几种方法汇总(窗口函数对数据去重)
2023/05/08 MySQL