通過(guò)Ajax方式綁定select選項(xiàng)數(shù)據(jù)的實(shí)例

更新時(shí)間：2018年08月14日 09:12:55 作者：Luoyger

今天小編就為大家分享一篇通過(guò)Ajax方式綁定select選項(xiàng)數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

問(wèn)題描述

在編寫Web頁(yè)面的時(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ù)的過(guò)程

$.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>");
  });
 },
});

最后可通過(guò)javaScript語(yǔ)句document.getElementById("select").value獲取select標(biāo)簽中被選中的值。

以上這篇通過(guò)Ajax方式綁定select選項(xiàng)數(shù)據(jù)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

ajax讀取properties資源文件數(shù)據(jù)的方法
這篇文章主要介紹了ajax讀取properties資源文件數(shù)據(jù)的方法,實(shí)例分析了基于Ajax實(shí)現(xiàn)讀取properties資源文件數(shù)據(jù)的相關(guān)技巧,需要的朋友可以參考下
2015-06-06
ajax實(shí)現(xiàn)輸入框文字改變展示下拉列表的效果示例
這篇文章主要介紹了通過(guò)ajax實(shí)現(xiàn)輸入框文字改變展示下拉列表的效果,需要的朋友可以參考下
2014-03-03
ajax問(wèn)題總結(jié) 比較全
在看文章前，先指定一個(gè)變量xhr，xhr代表ajax對(duì)象。測(cè)試瀏覽器：ie為ie6，firefox為2，其他的未測(cè)試。統(tǒng)稱ie6為ie，firefox2為ff。
2011-01-01
ajax中用josnp接收josn數(shù)據(jù)的實(shí)現(xiàn)方法
下面小編就為大家分享一篇ajax中用josnp接收josn數(shù)據(jù)的實(shí)現(xiàn)方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2017-12-12
AJAX顯示加載中并彈出圖層遮擋頁(yè)面的實(shí)現(xiàn)示例
大家都知道AJAX的請(qǐng)求是異步的，這種異步的機(jī)制給我們帶來(lái)了體驗(yàn)上的優(yōu)化，但是同時(shí)我要求我們有更完善的思維去處理一個(gè)業(yè)務(wù)。當(dāng)用戶請(qǐng)求后長(zhǎng)時(shí)間沒(méi)有回應(yīng)是一種非常不好的用戶體驗(yàn)，所以我們可以在請(qǐng)求后利用AJAX顯示加載中并彈出圖層遮擋頁(yè)面，下面來(lái)看看實(shí)現(xiàn)方法。
2016-12-12
HTTP狀態(tài)代碼及其定義解析 Ajax捕捉回調(diào)錯(cuò)誤參考
當(dāng)用戶試圖通過(guò) HTTP 訪問(wèn)一臺(tái)正在運(yùn)行 Internet 信息服務(wù) （IIS）的服務(wù)器上的內(nèi)容時(shí)，IIS 返回一個(gè)表示該請(qǐng)求的狀態(tài)的數(shù)字代碼。狀態(tài)代碼可以指明具體請(qǐng)求是否已成功，還可以揭示請(qǐng)求失敗的確切原因
2013-11-11
AJAX實(shí)踐DWR篇
這篇文章主要介紹了AJAX實(shí)踐DWR篇
2006-09-09
Ajax Hacks chm文件與源代碼下載
Ajax Hacks chm文件與源代碼下載...
2007-03-03
Ajax基礎(chǔ)教程之封裝(三)
這篇文章給大家介紹ajax基礎(chǔ)教程之封裝的知識(shí)，本文通過(guò)實(shí)例給大家詳細(xì)介紹，非常不錯(cuò)，感興趣的朋友一起學(xué)習(xí)吧
2016-06-06
琥珀無(wú)限級(jí)分類聯(lián)動(dòng)菜單AJAX版
琥珀無(wú)限級(jí)分類聯(lián)動(dòng)菜單AJAX版...
2006-11-11