簡單二級聯動

2021-10-14 01:43:46 字數 669 閱讀 6502

概述:

1、小資料二級聯動

2、大資料二級聯動

實現:1、小資料二級聯動思路

請求一次介面返回所有資料,使用指令碼控制第二個下拉選擇框的內容。

前台**:

其中: childs 中存的是動態生成的 標記。

所屬庫房

@foreach (father father in (ienumerable)viewbag.rooms)

樓層後台**:

二級聯動資料模型:

private ienumerable getrooms(listrooms)

)});

}使用 ajax 獲取資料或 mvc 使用 viewbag 都行。

記錄一下這個非常簡單的二級聯動,如果是用其他 ui 元件最好還是用人家寫好的。

2、大資料二級聯動實現思路

如果資料比較大,每一次第乙個下拉框切換的時候都要請求一下後台,獲取 json 資料,

前台修改 select 的html 內容,如果內容過多,建議修改 options 多刪少填,並修改其中的text 值和value 值。

需要注意的是,如果資料量較大,響應時間過長,需要進行頁面級的限制。

比如當使用者快速下拉選擇,短時間傳送多個請求時,伺服器響應不及時,指令碼堵塞。

這時候需要借助 js 或者其他前端元件限制此種行為。

二級聯動,多級聯動

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

二級聯動 js

在html部分只寫兩個select標籤 option標籤將用js的方法寫入 onchange 內容發生改變事件 用於select下拉列表中後的內容發生改變時候的觸發 核心部分就是js裡面的內容 建立乙個物件data來儲存資料 data 首先通過for迴圈來新增第一級裡面的內容 province va...

Ajax 二級聯動

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