文章詳情頁
通過Ajax方式綁定select選項(xiàng)數(shù)據(jù)的實(shí)例
瀏覽:185日期: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í)例就是小編分享給大家的全部內(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. AJAX原理以及axios、fetch區(qū)別實(shí)例詳解2. springmvc 結(jié)合ajax批量新增的實(shí)現(xiàn)方法3. Ajax獲取php返回json數(shù)據(jù)動(dòng)態(tài)生成select下拉框的實(shí)例4. Ajax實(shí)現(xiàn)登錄案例5. 利用js實(shí)現(xiàn)Ajax并發(fā)請(qǐng)求限制請(qǐng)求數(shù)量的示例代碼6. Ajax驗(yàn)證用戶名是否存在的實(shí)例代碼7. 解決ajax異步請(qǐng)求返回的是字符串問題8. 利用Ajax檢測用戶名是否被占用的完整實(shí)例9. AJAX檢測用戶名是否存在的方法10. 快速解決ajax傳遞為空但顯示在頁面上為undefined的問題
排行榜
