五级联动下拉菜单

1. 实现效果

使用wide创建一个五级联动下拉菜单,效果如下图:

2. 实现步骤

三级联动与五级联动制作方式相同。

(1) 添加下拉菜单。文档流布局→列表/菜单→添加相应选项→确定(五个下拉菜单操作相同)。

(2) 为一级菜单添加数据绑定。右键点击菜单→逻辑→数据绑定→绑定变量初始化→高级编辑,点击查看绑定变量初始化:

{"a":[{"name1":"地球","value1":"a1"}]}

绑定模式和绑定参数设置:

表单元素值绑定:valuea(这个赋值用来给下级联动调用)。

数组绑定多选框选项:a(a是高级编辑中的数组a)。

数组绑定多选框选项名:"name1"(name1是高级编辑中的name1,会在多选框中显示所有name1的值,如地球)。

数组绑定多选框选项值:"value1"(value1是高级编辑中的value1,用来设置下级联动菜单)。

(3) 为二级菜单添加数据绑定。右键点击菜单→逻辑→数据绑定→绑定变量初始化→高级编辑:

{"b":{"a1":[{"name1":"亚洲","value1":"a11"},{"name1":"欧洲","value1":"a12"}]}}

绑定模式和绑定参数设置:

表单元素值绑定:valueb(这个赋值用来给下级联动调用)。

数组绑定多选框选项:b[valuea()]()(根据valuea中的选项值变化而选择b中与之对应的值)。

数组绑定多选框选项名:"name1"(高级编辑中的name1,会在多选框中显示所有name1的值,如亚洲、欧洲)。

数组绑定多选框选项值:"value1"(高级编辑中的value1,用来设置下级联动菜单)。

(4) 为三级菜单添加数据绑定。右键点击菜单→逻辑→数据绑定→绑定变量初始化→高级编辑:

{"c":{"a11":[{"name1":"中国","value1":"a111"},{"name1":"日本","value1":"a112"}],"a12":[{"name1":"英国","value1":"a121"},{"name1":"法国","value1":"a122"}]}}

绑定模式和绑定参数设置:

表单元素值绑定:valuec(这个赋值用来给下级联动调用)。

数组绑定多选框选项:c[valueb()]()(根据valueb中的选项值变化而选择c中与之对应的值)。

数组绑定多选框选项名:"name1"(高级编辑中的name1,会在多选框中显示所有name1的值,如中国、英国)。

数组绑定多选框选项值:"value1"(高级编辑中的value1,用来设置下级联动菜单)。

(5) 为四级菜单添加数据绑定。右键点击菜单→逻辑→数据绑定→绑定变量初始化→高级编辑:

{"d":{"a111":[{"name1":"省份1","value1":"a1111"},{"name1":"省份2","value1":"a1112"}],"a112":[{"name1":"日本省份1","value1":"a1121"},{"name1":"日本省份2","value1":"a1122"}],"a121":[{"name1":"英国某郡","value1":"a1211"},{"name1":"英国某郡2","value1":"a1212"}],"a122":[{"name1":"法国省份1","value1":"a1221"},{"name1":"法国省份2","value1":"a1222"}]}}

绑定模式和绑定参数设置:

表单元素值绑定:valued(这个赋值用来给下级联动调用)。

数组绑定多选框选项:d[valuec()]()(根据valuec中的选项值变化而选择d中与之对应的值)。

数组绑定多选框选项名:"name1"(高级编辑中的name1,会在多选框中显示所有name1的值,如省份1、省份2)。

数组绑定多选框选项值:"value1"(高级编辑中的value1,用来设置下级联动菜单)。

(6) 为五级菜单添加数据绑定。右键点击菜单→逻辑→数据绑定→绑定变量初始化→高级编辑:

{"e":{"a1111":["某市1","某市2"],"a1211":["某市3","某市4"],"a1112":["某市5","某市6"],"a1121":["某市7","某市8"],"a1122":["某市9","某市10"],"a1212":["某市11","某市12"],"a1221":["某市13","某市14"],"a1222":["某市15","某市16"]}}

绑定模式和绑定参数设置:

数组绑定多选框选项:e[valued()]()(根据valued中的选项值变化而选择e中与之对应的值)。

3. 视频展示