模擬的資料層級結構
[,,
]},,]
},,,,]}]
data中的資料
data: ,
頁面
班級 },
}
兩個主要方法
bindmultipickerchange:
function
(e))},
bindmultipickercolumnchange:
function
(e));}
},/** * 這裡主要設定初始化模擬資料,根據實際情況可以用介面返回的資料
最主要用的是multiobjarray陣列和multiindex下標,multiobjarray
記錄的是顯示的元素陣列,第一維是年級資訊,第二維是班級資訊,第一維資料不需要更新只需要記錄選擇的位置即可,第二維需要根據第一維的變化進行變化,multiindex
記錄的是multiobjarray
對應的下標,用來顯示和最後提交資料的時候用。
bindmultipickercolumnchange 方法監聽到資料變化是個陣列,第乙個是列,第二個是行
由於只是兩級聯動,所以我們只需要關心列的變化即可,當列發生變化的時候從原始資料(原始的物件列表)根據序號找到對應的資料的孩子,賦值到二位陣列的第二列。
列變化為1的時候從rawdata中找到rawdata[1]的classes,賦值給二維陣列的第二維
bindmultipickerchange
當整個picker發生變化的時候重新記錄multiindex的值
Vue 兩級聯動
vue的兩級聯動,其實跟陣列類似,直接上 吧。class titlestyle 選單一 class typediv class typestyle v bind class v for item,index in typelist key index click firstlevelchange i...
用AJAX ASP實現的兩級聯動下拉列表
index.htm 請選擇請選擇 response.write 請選擇 1,if action province then sql select from class where parentid 0 ors.open sql,oconn,1,3 if not ors.eof or ors.bof ...
微信小程式 聯動選擇器
從底部彈起的滾動選擇器,現支援五種選擇器,通過mode來區分,分別是普通選擇器,多列選擇器,時間選擇器,日期選擇器,省市區選擇器,預設是普通選擇器。先來看看效果圖 普通選擇器 view picker bindchange bindpickerchang value range view class ...