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 相关文章推荐
Convert Seconds To Hours
Jun 16 Javascript
javascript中为某个元素指定事件的三种方式
Aug 07 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
JS代码实现table数据分页效果
May 26 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
JS经典正则表达式笔试题汇总
Dec 15 Javascript
微信小程序选择图片和放大预览图片功能
Nov 02 Javascript
vue实现验证码按钮倒计时功能
Apr 10 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
微信小程序用户信息encryptedData详解
Aug 24 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
Layer+Echarts构建弹出层折线图的方法
Sep 25 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反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
php 中序列化和json使用介绍
2013/07/08 Javascript
document.documentElement和document.body区别介绍
2013/09/16 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
2015/01/12 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
jQuery EasyUI中DataGird动态生成列的方法
2016/04/05 Javascript
基于jQuery实现表格内容的筛选功能
2016/08/21 Javascript
纯JavaScript手写图片轮播代码
2016/10/20 Javascript
详解Jquery Easyui的验证扩展
2017/01/09 Javascript
基于Vue实例生命周期(全面解析)
2017/08/16 Javascript
JS实现数组简单去重及数组根据对象中的元素去重操作示例
2018/01/05 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
Vue数据双向绑定底层实现原理
2019/11/22 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
js实现单元格拖拽效果
2020/02/10 Javascript
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python利用ElementTree模块处理XML的方法详解
2017/08/31 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
Python计算一个给定时间点前一个月和后一个月第一天的方法
2018/05/29 Python
对python的bytes类型数据split分割切片方法
2018/12/04 Python
Python 高效编程技巧分享
2020/09/10 Python
服装促销活动方案
2014/02/23 职场文书
2014年教师批评与自我批评思想汇报
2014/09/20 职场文书
医院领导班子四风问题对照检查材料
2014/10/26 职场文书
机关干部四风问题自我剖析及整改措施
2014/10/26 职场文书
2014年检验员工作总结
2014/11/19 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
功夫熊猫观后感
2015/06/10 职场文书
给校长的建议书作文500字
2015/09/14 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
JavaScript实现简单拖拽效果
2021/09/15 Javascript
浅谈 JavaScript 沙箱Sandbox
2021/11/02 Javascript