通過Ajax方式繫結select選項資料的例項
阿新 • • 發佈:2018-12-10
今天小編就為大家分享一篇通過Ajax方式繫結select選項資料的例項,具有一定的參考價值,對此有需要的朋友可以參考學習下。如有不足之處,歡迎批評指正。
問題描述
在編寫Web頁面的時候常常需要在後端取出資料動態放入select標籤中,以供選擇。
解決辦法
在HTML程式碼段中只需寫入
<select id="select">
<option value="-1">--請選擇--</option>
</select>
在JavaScript程式碼段中寫入以下ajax取資料並繫結資料的過程
$.ajax({ type : "post", url : "api/department/list", //此次url改為真正需要的url success : function(data, status) { $.each(data, function(index, item) { $("#select").append( //此處向select中迴圈繫結資料 "<option value="+item.id+">" + item.name+ "</option>"); });//歡迎加入前端全棧開發交流圈一起吹水聊天學習交流:864305860 }, });//幫助突破技術瓶頸,提升思維能力
最後可通過javaScript語句document.getElementById("select").value獲取select標籤中被選中的值。 結語
感謝您的觀看,如有不足之處,歡迎批評指正。