快捷導(dǎo)航

jquery實(shí)現(xiàn)觸發(fā)時(shí)更新下拉列表內(nèi)容的方法

更新時(shí)間：2015年12月02日 12:21:20 作者：shulin85

這篇文章主要介紹了jquery實(shí)現(xiàn)觸發(fā)時(shí)更新下拉列表內(nèi)容的方法,涉及jQuery使用ajax交互實(shí)現(xiàn)動(dòng)態(tài)更新的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了jquery實(shí)現(xiàn)觸發(fā)時(shí)更新下拉列表內(nèi)容的方法。分享給大家供大家參考，具體如下：

服務(wù)端假如有個(gè)請求地址用來返回所需數(shù)據(jù)

url:/hello

返回類似：

復(fù)制代碼代碼如下:

[{"西瓜":10},{"蘋果":12},{"香蕉":13},{"芒果":14}]

這樣的json數(shù)據(jù)

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",//返回?cái)?shù)據(jù)格式
  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程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

相關(guān)文章

寫出高效jquery代碼的19條指南
討論jQuery和javascript性能的文章并不罕見。然而，本文我計(jì)劃總結(jié)一些速度方面的技巧和我本人的一些建議，來提升你的jQuery和javascript代碼。好的代碼會(huì)帶來速度的提升?？焖黉秩竞晚憫?yīng)意味著更好的用戶體驗(yàn)
2014-03-03
jQuery Easyui使用（二）之可折疊面板動(dòng)態(tài)加載無效果的解決方法
這篇文章主要介紹了jQuery Easyui使用之可折疊面板動(dòng)態(tài)加載無效果的解決方案，非常不錯(cuò)，具有參考借鑒價(jià)值，感興趣的朋友一起看下吧
2016-08-08
jQuery 3.0中存在問題及解決辦法
這篇文章主要介紹了jQuery 3.0中存在問題及解決辦法的相關(guān)資料,需要的朋友可以參考下
2016-07-07
jQuery實(shí)現(xiàn)背景彈性滾動(dòng)的導(dǎo)航效果
這篇文章主要介紹了jQuery實(shí)現(xiàn)背景彈性滾動(dòng)導(dǎo)航效果的方法,涉及jQuery動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,需要的朋友可以參考下
2016-06-06
JQuery 常用方法基礎(chǔ)教程
對于學(xué)習(xí)使用jquery 的朋友，能用的到，簡單的了解下jquery的一些操作。
2009-02-02
Jquery仿IGoogle實(shí)現(xiàn)可拖動(dòng)窗口示例代碼
這個(gè)拖動(dòng)窗口是根據(jù)一個(gè)Jquery的框架直接做出來的:easywidgets，廢話就不多說了，直接把源代碼貼出來，讓大家學(xué)習(xí)
2014-08-08
使用JQuery在線制作ppt并在線演示源碼特效
本篇文章是基于JQuery在線制作的ppt在線演示，非常高大尚，效果非常好，需要的朋友可以參考下。
2015-09-09
jQuery插件實(shí)現(xiàn)手風(fēng)琴二級菜單
這篇文章主要為大家詳細(xì)介紹了jQuery插件實(shí)現(xiàn)手風(fēng)琴二級菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
jQuery實(shí)現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)Table表格隔行變色及高亮顯示當(dāng)前選擇行效果,涉及jQuery針對table元素遍歷、運(yùn)算、樣式及鼠標(biāo)事件動(dòng)態(tài)響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下
2017-02-02
jquery選擇器需要注意的問題
本文講述的是jquery選擇器結(jié)果是數(shù)組時(shí)需要主要的一個(gè)問題，并詳細(xì)分析了產(chǎn)生此問題的原因，這里記錄下來，小伙伴們在項(xiàng)目中使用的時(shí)候要注意一下。
2014-11-11