文章詳情頁
通過Ajax方式綁定select選項數(shù)據(jù)的實例
瀏覽:143日期:2022-06-11 14:15:31
問題描述
在編寫Web頁面的時候常常需要在后端取出數(shù)據(jù)動態(tài)放入select標(biāo)簽中,以供選擇。
解決辦法
在HTML代碼段中只需寫入
<select id="select"> <option value="-1">--請選擇--</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選項數(shù)據(jù)的實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持。
標(biāo)簽:
Ajax
上一條:Ajax獲取php返回json數(shù)據(jù)動態(tài)生成select下拉框的實例下一條:ajax請求后臺得到j(luò)son數(shù)據(jù)后動態(tài)生成樹形下拉框的方法
相關(guān)文章:
1. 使用AJAX(包含正則表達(dá)式)驗證用戶登錄的步驟2. layui的checbox在Ajax局部刷新下的設(shè)置方法3. Ajax引擎 ajax請求步驟詳細(xì)代碼4. 解決ajax的delete、put方法接收不到參數(shù)的問題方法5. Ajax提交post請求案例分析6. 使用FormData進(jìn)行Ajax請求上傳文件的實例代碼7. Django與AJAX實現(xiàn)網(wǎng)頁動態(tài)數(shù)據(jù)顯示的示例代碼8. 爬取今日頭條Ajax請求9. ajax實現(xiàn)頁面的局部加載10. axios和ajax的區(qū)別點總結(jié)
排行榜
