1. 程式人生 > >通過Ajax方式繫結select選項資料的例項

通過Ajax方式繫結select選項資料的例項

今天小編就為大家分享一篇通過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標籤中被選中的值。 結語

感謝您的觀看,如有不足之處,歡迎批評指正。