使用wide创建一个五级联动下拉菜单,效果如下图:
三级联动与五级联动制作方式相同。
(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中与之对应的值)。