1. 程式人生 > >bootstrap selectpicker 動態載入資料

bootstrap selectpicker 動態載入資料

實現:

spring mvc負責後臺,ajax負責前臺。所有程式碼均為本人工程中真正應用的程式碼,肯定可行,網上找到各種大bug的程式碼真是moutain people moutain sea啊!!!!

下拉框寫法(是否帶搜尋功能之類的看業務要求和您個人喜好了):

選擇學校--:
<select id="schoolno" name="schoolno" class="selectpicker" >
</select>

js程式碼:

function getschoolList() {//獲取下拉學校列表
$.ajax({
            url: "/eschool/viewEschoolList"
,//寫你自己的方法,返回map,我返回的map包含了兩個屬性:data:集合,total:集合記錄數量,所以後邊會有data.data的寫法。。。 // 資料傳送方式 type: "get", // 接受資料格式 dataType: "json", // 要傳遞的資料 data: 'data', // 回撥函式,接受伺服器端返回給客戶端的值,即result值 success: function (data) { //alert(data.data); $.each(data.data, function (i) { // alert(i); // $("<option value='" + data.data[i].schoolno + "'>" + data.data[i].schoolname + "</option>")
// .appendTo("#schoolno.selectpicker"); $('#schoolno.selectpicker').append("<option value=" + data.data[i].schoolno + ">" + data.data[i].schoolname + "</option>"); }); $('#schoolno').selectpicker('refresh'); }, error: function (data) { alert("查詢學校失敗"
+ data); } }) }
Safari和chrome測試均沒問題,IE懶得測,沒有windows電腦~~~