中继器制作联动下拉列表
用Axure在画高保真原型的过程中，常常出现需要两个或者两个以上的下拉列表联动选择的情况，采用活动面板制作就会比较复杂，为了高移植性更强，更便于使用，采用中继器联动来制作这种效果。
基础元件准备
准备两个中继器，分别命名为一级下拉选和二级下拉选；
准备两个矩形，分别命名为一级选择和二级选择；
按照下图方式布置，可以将中继器和矩形的大小设置为300×40；
中继器设置
就以省份-城市选择为例。
分别对一级下拉选中继器和二级下拉选进行设置，其中一级下拉选中只保留一列，字段命名为province，增加测试数据为：北京、天津、河北；二级下拉选中保留两列，分别命名为province_city和city，增加测试数据：[北京，海淀][天津，南开区][天津、河西区][天津，河东区][河北省、石家庄市][河北省，沧州市][河北省，廊坊市][河北省，唐山市]；
注意：一级下拉选中继器.province和二级下拉选中继器.province_city要保持同步。
每个中继器在交互中会有默认载入设置，默认载入第一列数据。
对一级下拉选中继器的交互设置保持默认不进行修改；
对二级下拉选中继器的交互设置进行修改，载入时矩形文本设置为city字段。
画布里显示样式如下图：
中继器交互设置
设置思路为：
点击一级下拉选中继器内的矩形时，将文字赋值给一级选择矩形；
当一级选择完成的同时对二级中继器进行设置筛选，在二级下拉中继器中只显示二级下拉中继器.province==一级选择矩形文字的内容；
点击二级下拉选中继器内的矩形时，将文字赋值给二级选择矩形；
1、设置一级下拉选中继器：
双击一级下拉选中继器进入内部，点击内置矩形；
给矩形设置交互，鼠标点击时设置文本，将一级下拉选中继器的选择内容赋值给一级选择矩形；
同时设置二级下拉选择中继器的筛选，添加中继器筛选动作。
2、设置二级下拉选中继器：
双击二级下拉选中继器进入内部，点击内置矩形；
给矩形设置交互，鼠标点击时设置文本，将二级下拉选中继器的选择内容赋值给二级选择矩形；
到此，中继器二级联动下拉选已有雏形。
增加筛选功能
为增强下拉列表的便捷性，为其增加筛选功能。
准备元件：两个文本框，分别命名一级筛选文本框和二级筛选文本框。
为一级筛选文本框设置交互：一级文本框文本改变时，对一级下拉选中继器增加筛选，添加局部变量和插入变量函数。
将文本框的元件文字设置为局部变量；
对局部变量设置模糊搜索；
为二级筛选文本框设置交互：二级文本框文本改变时，对二级下拉选中继器增加筛选，添加局部变量和插入变量函数。
将文本框的元件文字设置为局部变量；
对局部变量设置模糊搜索；
为中继器设置滚动条
中继器不能够直接设置滚动条的，所以要是下拉列表中的内容过多的话，其显示效果就会很不协调。
为此，通过中继器和活动面板的结合使用优化显示效果。
点击中继器，右键选择转为活动面板并命名为二级选择。
设置活动面板大小尺寸为300×200，同时在活动面板的样式中设置为垂直滚动，即可出现滚动效果。
样式调整
根据框架整体颜色，调整样式。
中继器制作联动下拉列表相关推荐
- Excel技巧—轻松搞定多级联动下拉列表
点赞再看,养成习惯:不临深溪,不知地之厚也. 微信搜索[亦心Excel]关注这个不一样的自媒体人. 本文 GitHub https://github.com/hugogoos/Excel 已收录,包含 ...
- 通用四级联动下拉列表
Author: shaoyun Email: shaoyun (at) yeah.net Date: 2010-09-03 Blog: http://shaoyun.cnblogs.com/ 前面的文 ...
- java下拉框查询_[Java教程]jQuery实现联动下拉列表查询框
[Java教程]jQuery实现联动下拉列表查询框 0 2015-12-07 18:00:04 厂商:请选择 品牌:请选择 型号:请选择 效果如下: 本文网址:http://www.shaoqun.c ...
- jquery php联动,jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
jQuery结合PHP+MySQL实现二级联动下拉列表[实例] 实现原理:根据省份值的变动,通过jQuery把sf_id传给后台php文件处理,php通过查询MySQl数据库,得到对应的地市名,并返回 ...
- Java下使用Apache POI生成具有三级联动下拉列表的Excel文档
使用Apache POI生成具有三级联动下拉列表的Excel文档: 具体效果图与代码如下文. 先上效果图: 开始贴代码,代码中部分测试数据不影响功能. 第一部分(核心业务处理): 此部分包含几个方面: ...
- Axure教程：用中继器制作调查问卷/考试试卷
今天教大家用中继器制作调查问卷或考试试卷,包括了单选.多选和填空题. 制作完成后,以后使用方便,仅需简单填写中继器的内容,即可自动生成调查问卷或考试问卷,所以强烈推荐给各位使用. 原型预览及下载地址: ...
- 二级联动 三级联动 多级联动 无限级联动下拉列表或菜单专题
二级联动 三级联动 多级联动 无限级联动下拉列表或菜单专题 三维数组数据源 A - 请选择 -北京市天津市河北省山西省内蒙古自治区辽宁省吉林省黑龙江省上海市江苏省浙江省安徽省福建省江西省山东省河南 ...
- 【Axure视频教程】用中继器制作调查问卷
今天教大家在Axure里如何用中继器制作调查问卷的原型模板,问卷中包括单选题.多选题和填空题.这个模板是用中继器制作的,所以使用也非常方便,只需要在中继器表格里填写问题类型.内容.答案,即可自动生成对 ...
- 【Axure视频教程】用中继器制作排名图
Hello,今天教大家用中继器制作排名图,可以在中继器表格里填写数据以及坐标轴最大值后,自动生成自动排名图的效果.该模板使用简单,复用性强.再次使用时,只需要在中继器表格里填写内容,自动生成高保真效果 ...
- php mysql实现下拉列表查询_php+mysql实现二级联动下拉列表
二级联动下拉列表(select),都是从数据库中取值,其中第二级为可多选列表(multiple).若要实现二级也是下拉菜单,可以将multiple改了即可. 全动态二级联动下拉列表 /******** ...
最新文章
- 怎么用计算机的计算器转换进位制,计算器如何进行数值间的转换？
- SAP CRM 使用Javascript触发SAP Server Event
- 【12期 3月期刊 自荐】
- 10亿+文件数压测，阿里云JindoFS轻松应对
- java代码=--数组复制
- nginx 安装_安装Nginx的几种方式
- 较流行的4个开源协议
- 电子表格和oracle,##请问数据库和电子表格之间有什么区别
- 如何使用Mac电脑内置的屏幕共享功能进行远程桌面协助？
- itools苹果录屏大师_录屏可以有声音，发照片可以免流量，计算器输错可回删
- Employee类的层级结构
- Android Study 之 聊聊有关SVG那些事儿
- 并发编程之四：并发之共享问题、线程安全、synchronized关键字
- 微信企业号开发：openapi回调地址请求不通过
- 一些《集成电路与光刻机》笔记
- JAVA | MongoDB 去重、聚合函数、Criteria Query使用
- Windows XP系统中实用的命令及操作技巧
- windows linux终端模拟器,Wsl-Terminal终端模拟器
- 【jackson异常】com.fasterxml.jackson.databind.JsonMappingException异常处理方法
- vue动态style添加背景图backgroundImage，结合computed