jquery實現(xiàn)觸發(fā)時更新下拉列表內容的方法
更新時間:2015年12月02日 12:21:20 作者:shulin85
這篇文章主要介紹了jquery實現(xiàn)觸發(fā)時更新下拉列表內容的方法,涉及jQuery使用ajax交互實現(xiàn)動態(tài)更新的相關技巧,具有一定參考借鑒價值,需要的朋友可以參考下
本文實例講述了jquery實現(xiàn)觸發(fā)時更新下拉列表內容的方法。分享給大家供大家參考,具體如下:
服務端假如有個請求地址用來返回所需數(shù)據(jù)
url:/hello
返回類似:
復制代碼 代碼如下:
[{"西瓜":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",//返回數(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程序設計有所幫助。
您可能感興趣的文章:
- jQuery實現(xiàn)鼠標雙擊Table單元格變成文本框及輸入內容后更新到數(shù)據(jù)庫的方法
- Jquery easyUI 更新行示例
- jquery ajax 局部無刷新更新數(shù)據(jù)的實現(xiàn)案例
- JQuery DataTable刪除行后的頁面更新利用Ajax解決
- 基于jQuery實現(xiàn)的百度導航li拖放排列效果,即時更新數(shù)據(jù)庫
- 巧妙使用JQuery Clone 添加多行數(shù)據(jù),并更新到數(shù)據(jù)庫的實現(xiàn)代碼
- Jquery工作常用實例 使用AJAX使網(wǎng)頁進行異步更新
- jQuery學習總結之元素的相對定位和選擇器(持續(xù)更新)
- ajax更新數(shù)據(jù)后,jquery、jq失效問題
相關文章
jquery scrollTop方法根據(jù)滾動像素顯示隱藏頂部導航條
使用jquery的scrollTop方法監(jiān)視頁面垂直滾動像素,并根據(jù)像素隱藏或者顯示頂部的導航條,具體實現(xiàn)代碼如下,感興趣的朋友可以參考下哈2013-05-05