通過Ajax方式綁定select選項(xiàng)數(shù)據(jù)的實(shí)例
更新時(shí)間：2018年08月14日 09:12:55 作者：Luoyger
今天小編就為大家分享一篇通過Ajax方式綁定select選項(xiàng)數(shù)據(jù)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
問題描述
在編寫Web頁面的時(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ù)的過程
$.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選項(xiàng)數(shù)據(jù)的實(shí)例就是小編分享給大家的全部內(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)輸入框文字改變展示下拉列表的效果示例
這篇文章主要介紹了通過ajax實(shí)現(xiàn)輸入框文字改變展示下拉列表的效果,需要的朋友可以參考下2014-03-03
在看文章前，先指定一個(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ì)大家有所幫助。一起跟隨小編過來看看吧2017-12-12
AJAX顯示加載中并彈出圖層遮擋頁面的實(shí)現(xiàn)示例
大家都知道AJAX的請(qǐng)求是異步的，這種異步的機(jī)制給我們帶來了體驗(yàn)上的優(yōu)化，但是同時(shí)我要求我們有更完善的思維去處理一個(gè)業(yè)務(wù)。當(dāng)用戶請(qǐng)求后長時(shí)間沒有回應(yīng)是一種非常不好的用戶體驗(yàn)，所以我們可以在請(qǐng)求后利用AJAX顯示加載中并彈出圖層遮擋頁面，下面來看看實(shí)現(xiàn)方法。2016-12-12
HTTP狀態(tài)代碼及其定義解析 Ajax捕捉回調(diào)錯(cuò)誤參考
當(dāng)用戶試圖通過 HTTP 訪問一臺(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篇2006-09-09
Ajax Hacks chm文件與源代碼 下載...2007-03-03
這篇文章給大家介紹ajax基礎(chǔ)教程之封裝的知識(shí)，本文通過實(shí)例給大家詳細(xì)介紹，非常不錯(cuò)，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
琥珀無限級(jí)分類聯(lián)動(dòng)菜單AJAX版
琥珀無限級(jí)分類聯(lián)動(dòng)菜單AJAX版...2006-11-11