Axure 9 下拉列表框选择时实现交互功能

Axure 9 下拉列表框选择时实现交互功能

目前网络查找的关于Axure 下拉列表框实现交互的指导教程多为第8版本, 第9版本非常少,且操作繁琐,不易理解,本人经过仔细研究,找到了一个操作简单的实现方式,特此提供,以供参考:
版本:Axure9.0.0.3655
原型内容:三个页面A\B\C,每个页面包含下拉列表和该页面名称
实现目标:在下拉列表框中点击该文本时,实现对应页面跳转,预览时如在下拉列表中点击B,则画面跳转B页面
在这里插入图片描述
操作步骤如下:
(1)创建页面
创建3个页面,每个页面建立下拉列表框,列表框内容均为A\B\C,每个页面的下拉列表框以该字母为首行,如图所示:在这里插入图片描述在这里插入图片描述
(2)设置用例
在页面A选中下拉列表按钮,在画面右侧选择“交互”-新建交互-鼠标点击时,此时可以在页面任意空白处低点击,页面如下:
在这里插入图片描述
点击启用用例,输入对应逻辑
在这里插入图片描述
点击确定之后,此时可以再次点击新增用例,输入对应逻辑:在这里插入图片描述
在这里插入图片描述
此时在“”跳转页面B“”用例可以点击插入动作-打开链接-选择页面“B”-确定(此处逻辑为鼠标点击下拉页面的中的“B”,页面跳转至B页面)
跳转页面C,插入动作-打开链接-选择页面“C”-确定(同样跳转逻辑)
在这里插入图片描述
在这里插入图片描述此时A页面设置已完成,根据同样操作设置B页面和C页面的下拉框。
至此,关于Axure 9 下拉框实现交互设置已完毕。
在设置动作时,可根据自身需求设置其他动作,如显示,隐藏等。

### 如何在 Axure实现下拉列表的一对多联动功能 #### 制作原理 在 Axure RP 中,通过中继器(Repeater)可以轻松实现复杂的交互逻辑。对于一对多的下拉列表联动功能,核心在于利用中继器的数据绑定特性来动态更新数据源[^1]。 #### 数据准备 创建一个中继器并为其设置初始数据表。假设我们需要实现两个下拉列表 A 和 B 的联动,其中 A 是父级列表,B 是子级列表。A 的选择会决定 B 显示的内容。为此,在中继器的数据表中设计两列:`Category` 表示分类(即 A 的选项),`Subcategory` 表示子类(即 B 的选项)。例如: | Category | Subcategory | |----------|-------------| | Fruits | Apple | | Fruits | Banana | | Vegetables | Carrot | | Vegetables | Potato | 此结构允许基于 `Category` 动态过滤 `Subcategory`[^2]。 #### 交互逻辑 为了实现联动效果,需编写条件语句以控制子列表的行为。具体来说,当用户更改父列表的选择,触发事件重新加载中继器,并应用筛选规则只显示符合条件的子项。 以下是关键操作步骤描述转换成的具体方法: - **初始化界面** 创建两个组合框组件分别代表上下两级菜单;同拖拽一个 Repeater 控件到画布上作为承载实际条目展示区域。 - **配置动作行为** - 设置第一个 Dropdown (Parent List) 的 OnChange 属性指向一段脚本或者预定义好的用例流程图节点; ```javascript var selectedValue = event.target.value; repeater.setItems(repeater.getItems().filter(function(item){ return item[&#39;Category&#39;] === selectedValue; })); ``` 上述 JavaScript 片段用于实调整呈现给用户的第二层项目集合[^3]. - **优化用户体验** 可考虑加入 placeholder 提示文字、默认选中状态设定等功能提升易用性[^4]。 ```html <select id="parentList"> <option value="">--Select a category--</option> <!-- Options populated dynamically --> </select> <div data-role="repeater" id="childItems"></div> <script type="text/javascript"> document.getElementById(&#39;parentList&#39;).addEventListener(&#39;change&#39;, function() { const parentSelection = this.value; let filteredData = []; // Assuming &#39;dataSource&#39; is predefined array of objects containing all possible child items. dataSource.forEach((item)=>{ if(item.Category == parentSelection){ filteredData.push({label:item.Subcategory}); } }); document.querySelector(&#39;#childItems[data-role="repreter"]&#39;).update(filteredData); }); </script> ``` 以上代码片段展示了如何监听 Parent List 的变化,并据此刷新 Child Items 的内容。 ---
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值