文章詳情頁
通過Ajax方式綁定select選項(xiàng)數(shù)據(jù)的實(shí)例
瀏覽:151日期:2022-06-11 14:15:31
問題描述
在編寫Web頁面的時(shí)候常常需要在后端取出數(shù)據(jù)動(dòng)態(tài)放入select標(biāo)簽中,以供選擇。
解決辦法
在HTML代碼段中只需寫入
<select id="select"> <option value="-1">--請(qǐng)選擇--</option> </select>
在JavaScript代碼段中寫入以下ajax取數(shù)據(jù)并綁定數(shù)據(jù)的過程
$.ajax({ type : "post", url : "api/department/list", //此次url改為真正需要的url success : function(data, status) { $.each(data, function(index, item) { $("#select").append( //此處向select中循環(huán)綁定數(shù)據(jù) "<option value="+item.id+">" + item.name+ "</option>"); }); }, });
最后可通過javaScript語句document.getElementById("select").value獲取select標(biāo)簽中被選中的值。
以上這篇通過Ajax方式綁定select選項(xiàng)數(shù)據(jù)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持。
標(biāo)簽:
Ajax
上一條:Ajax獲取php返回json數(shù)據(jù)動(dòng)態(tài)生成select下拉框的實(shí)例下一條:ajax請(qǐng)求后臺(tái)得到j(luò)son數(shù)據(jù)后動(dòng)態(tài)生成樹形下拉框的方法
相關(guān)文章:
1. 原生js實(shí)現(xiàn)ajax請(qǐng)求和JSONP跨域請(qǐng)求操作示例2. 開源 Ajax JSF Library - RCFaces 發(fā)布3. ajax請(qǐng)求添加自定義header參數(shù)代碼4. Ajax實(shí)現(xiàn)搜索功能的分頁5. 快速解決ajax返回值給外部函數(shù)的問題6. PHP下ajax跨域的解決方案之jsonp實(shí)例分析7. 基于ajax后臺(tái)返回的數(shù)據(jù)為空前臺(tái)顯示出現(xiàn)undefined的解決方法8. Ajax驗(yàn)證用戶名是否存在的實(shí)例代碼9. ajax實(shí)現(xiàn)省市三級(jí)聯(lián)動(dòng)效果10. ztree+ajax實(shí)現(xiàn)文件樹下載功能
排行榜
