通過Ajax方式綁定select選項數(shù)據(jù)的實例
問題描述
在編寫Web頁面的時候常常需要在后端取出數(shù)據(jù)動態(tài)放入select標簽中,以供選擇。
解決辦法
在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標簽中被選中的值。
以上這篇通過Ajax方式綁定select選項數(shù)據(jù)的實例就是小編分享給大家的全部內(nèi)容了,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關(guān)文章
聊一聊數(shù)據(jù)請求中Ajax、Fetch及Axios的區(qū)別
axios、fetch和ajax的區(qū)別在網(wǎng)絡上存在很多文章,下面這篇文章也是給大家介紹了關(guān)于數(shù)據(jù)請求中Ajax、Fetch及Axios區(qū)別的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-02-02js+ajax處理java后臺返回的json對象循環(huán)創(chuàng)建到表格的方法
這篇文章主要介紹了js+ajax處理java后臺返回的json對象循環(huán)創(chuàng)建到表格的方法,涉及javascript操作json對象動態(tài)創(chuàng)建表格以及基于ajax與后臺交互的相關(guān)技巧,需要的朋友可以參考下2016-08-08通過Ajax兩種方式講解Struts2接收數(shù)組表單的方法
使用struts2表單傳值,可以傳一個或者是作為一個對象的各個屬性傳,都非常靈活便捷。但是如果我們需要傳一個數(shù)組并希望struts正確接收,該怎么處理呢?接下來,通過本文給大家介紹通過Ajax兩種方式講解Struts2接收數(shù)組表單的方法,需要的朋友可以參考下2015-10-10使用Jquery+Ajax+Json如何實現(xiàn)分頁顯示附JAVA+JQuery實現(xiàn)異步分頁
本文給大家介紹基于jquery+ajax+json實現(xiàn)數(shù)據(jù)分頁顯示,以及JAVA+JQuery實現(xiàn)異步分頁,本文代碼簡單易懂,非常具有參考價值,感興趣的朋友一起學習吧2015-10-10