AJAX實現二級聯動

2021-08-01 12:41:23 字數 1429 閱讀 5774

通過ajax實現二級聯動,先動態獲取一級下拉列表,通過onchange()事件,非同步查詢二級下拉列表內容,把內容寫進標籤,存入二級下拉列表中

一級下拉列表動態獲取列表內容

@responsebody

@permission("st1000")

public string editposoperator(parkingsitevo parkingsitevo ) else

return callbacksuccess(rlt);

}

html頁面獲取model域中的物件展示一級下拉列表

選擇區域

#if($msg)//判斷是新增還是編輯(新增沒有資訊,編輯需要回顯資料)

請選擇//設定預設下拉選項

#foreach($aaaa in $arealist)//velocity模板迴圈model域物件

$!#end

#else

$#foreach($aaaa in $arealist)

#if($parkingsitevo.areacode != $aaaa.areacode)

$!#end

#end

#end

在一級下拉列表中設定onchange事件

並給事件傳參(this.options[this.options.selectedindex].value 獲取當前下拉列表中被選中列的value值)

在js中實現onchange事件通過ajax非同步查詢

把查詢結果通過迴圈插入二級下拉列表當中

function selectsitebyareacode(id) , 

async: false,

type: "post",

success: function(result)

$("#site").html(str);

} });

}

非同步查詢呼叫的url,返回查詢結果

@responsebody

@permission("st1000")

public listselectsitebyareacode(string id )

html頁面二級下拉列表標籤

選擇路段

#if($msg)//判斷新增還是編輯頁面

請選擇//預設選項

#else

$//資料回顯

#end

Ajax 二級聯動

準備工作匯入vue jquery的js包 導包部分省略不寫 接下來應該先寫html頁面的 姓名 級部 請選擇級部 班級 請選擇班級 性別 男 請選擇省 省請選擇市 市愛好 籃球 足球 排球 簡介 接下來是jquery的例項 控制器 例項部分 查詢年級的表 return 年級表查詢的結果集 respo...

二級聯動,多級聯動

首先,二級聯動,還是多級聯動小夥伴們不要怕,其實很簡單。首先,理清思路 首先第乙個頁面,肯定是進來就需要載入的 然後通過觸發第乙個事件,一般都是select寫 聯動,然後通過事件方法將引數 二級需要的條件 傳送給下乙個 需要用的地方 需要展示的地方 上 注意 function 這個方法裡是頁面在載入...

jquery實現二級聯動

實現原理 根據省份值的變動,通過jquery把sf id傳給後台php檔案處理,php通過查詢mysql資料庫,得到對應的地市名,並返回json資料給前端處理,即實現聯動效果!為便於講解,這裡直接給出省份 河南省 sf id 1 浙江省 sf id 2 而地市和學生資訊則分別建立兩張資料表!編碼方式...