jquery实现触发时更新下拉列表内容的方法
作者:bea
本文实例讲述了jquery实现触发时更新下拉列表内容的方法。分享给大家供大家参考,具体如下: 服务端假如有个请求地址用来返回所需数据 url:/hello 返回类似: 代码如下: [{"西瓜":10},{"苹果":12},{"香蕉":13},{"芒果":14}] 这样的json数据 html: 按钮:<input type="button" id="btn" value="按 钮" /> 下拉列表:<select id="sel"></sel
本文实例讲述了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程序设计有所帮助。
有用 | 无用
服务端假如有个请求地址用来返回所需数据
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代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
- 学习JavaScript设计模式(代理模式)
- 全面解析Bootstrap图片轮播效果
- 谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
- 解决JavaScript数字精度丢失问题的方法
- Javascript实现检测客户端类型代码封包
- javascript学习小结之prototype
- 简单实现JS对dom操作封装
- jQuery实现获取绑定自定义事件元素的方法
- JS折半插入排序算法实例
- 如何动态加载外部Javascript文件
- javascript实现获取浏览器版本、浏览器类型
- JavaScript如何禁止Backspace键
- js文本框输入内容智能提示效果
- JavaScript使用DeviceOne开发实战(四)仿优酷视频应用
- Jquery左右滑动插件之实现超级炫酷动画效果附源码下载
- jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
- jQuery 1.9.1源码分析系列(十三)之位置大小操作
- 解决jQuery使用JSONP时产生的错误