微信小程式兩級聯動

2021-10-02 20:29:25 字數 1152 閱讀 8768

模擬的資料層級結構

[,,

]},,]

},,,,]}]

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 ...