在本教程中,你将学习如何通过第一个下拉列表的选项控制第二个下拉列表的选项。【原型预览】
备注:动态改变一个下拉列表元件中的项目是不可能的,所以这种方法是通过创建多个版本的下拉列表,通过把它们放在动态面板的状态中进行切换实现的。
1、元件设置
创建3个下拉列表元件
- 打开一个新的RP文件,并在画布中打开Page 1。
- 拖拽3个下拉列表元件到画布中,分别命名为“食物选项”、“汉堡包”、“热狗”。
主下拉列表的选项
- 双击食物选项下拉列表来编辑它的项目。
- 在弹出的对话框中,点击两次添加来创建两个新的选项,分别命名为“汉堡包”、“热狗”。
- 点击确定按钮关闭对话框。
二级下拉列表的选项
- 给汉堡包下拉列表创建两个选项:“含奶酪”和“不含奶酪”。
- 给热狗下拉列表创建两个选项:“番茄芥末味”和“辣根酸菜味”。
2、将二级下拉列表放入动态面板的两个状态中
- 在汉堡包下拉列表上点击鼠标右键,然后在弹出的右键菜单中选择转换为动态面板。
- 在概要面板中,将动态面板的第一个状态命名为“汉堡包”。
- 仍然在概要面板中,将鼠标悬停在动态面板上面,然后点击右侧的添加状态图标,将新的状态命名为“热狗”。
- 仍然在概要面板中,选中热狗下拉列表,然后将它拖到动态面板的热狗状态下。这样就可以将它添加到对应的状态中,并在画布中打开状态编辑模式。
- 在画布中,将热狗下拉列表移动到(0,0)的位置。
- 点击画布右上角的关闭或者按ESC键退出状态编辑模式。
3、当主下拉列表的选项改变时更改动态面板的状态
- 选中食物选项下拉列表元件,点击交互面板中的新建交互。
- 在弹出的列表中选择选项改变时事件,然后点击设置面板状态动作。
- 在目标下拉列表中选择动态面板。
- 在STATE下拉列表中,选择值,然后点击字段右侧的fx图标以打开编辑值窗口。
- 删除对话框顶部字段中的文字,然后点击插入变量或函数。
- 在弹出的下拉列表中,选择元件下的text,这时候字段中的内容显示为“[[This.text]]”,它表示下拉列表当前显示的选项。
备注:因为动态面板的状态和下拉列表的选项名称相同,所以我们可以将动态面板的状态设置为食物选项下拉列表选定的项。
- 点击确定按钮关闭编辑值对话框,再次点击确定按钮保存设置面板状态动作。
4、预览交互
- 预览页面,在第一个下拉列表中默认选项为汉堡包,第二个下拉列表中显示相关的配料。
- 点击第一个下拉列表,选择热狗,第二个下拉列表中的选项也会改变。
附加信息和提示
添加更多选项
通过这种方法,你可以向主下拉列表中任意添加选项,只需要给动态面板添加足够多的状态,使每个状态都对应一个下拉列表选项。确保动态面板的状态名称与下拉列表中选项的名称一致。