原标题：Axure教程：下拉多选列表集合(多选下拉列表+单选下拉列表+分级下拉列表)

之前和大家分享了 《》、《》，很多同学私信我说很好使用，希望能够做一个多选下拉列表的教程

所以今天就和大家分享怎么用中继器制作多选下拉列表。该原型制作完成后，下次使用简单，只需要填写中继器表格即可。

原型预览：https://qu0b4r.axshare.com/

下面是多选下拉列表的效果介绍，如果想看单选或者多级下拉列表的同学可以看回我之前的文章，或者点击上面原型预览地址查看。

效果演示 1. 整体效果

2. 选中和取消选中

3. 查看全部已选中的标签

默认显示2个标签，鼠标移入看查看全部标签

4. 删除标签取消选中

5. 模糊搜索效果

6. 添加选项效果

7. 全选和全部取消效果

制作教程 1. 制作材料

分为几部分，下拉框和弹出列表，如果需要搜索的话还需要搜索框、全选和取消全选的按钮。

然后ui方面我就不详细说了，大家根据自己的喜好完成就可以了。

2. 下拉框

如上图所示制作成组合，分别有矩形，中继器，箭头符号

中间的是用中继器来做的，默认显示项为2，鼠标移入时不限，鼠标移出时为2。每项加载时，设置文本=item.column0，默认为空不用填，下面会说到利用弹出列表内的中继器把内容导过来。点击中继器的X按钮，这里并不是删除改行，是取消弹出列表内的中继器对应行的选中，简单来说说就是这个中继器只是内容的显示。

鼠标点击该组合时，切换弹出列表的可见性。然后旋转箭头180度，这里也可以用上下两个箭头，然后切换他们的可见性。

3. 弹出列表

弹出列表由背景框，内容中继器、搜索框全选和全部取消按钮组成，

3.1 中部内容中继器

材料：文本+多选按钮。这里系统的多选按钮太丑，所以我美化了一下，具体可以看回我之前的文章《建议收藏：Axure交互常用按钮组》

交互逻辑：

在中继器里填写内容，然后每项加载时将内容设置到文本。

点击多选框的时候切换选中和取消，如果选中时，添加行到上面说到的下拉框标签中继器，如果取消选中时，删除下拉框标签中继器对应行。

3.2 搜索

这里这需要对中继器做模糊搜索就可以了，需要用到index函数，对搜索框内的输入的内容进行筛选。具体公式[[Item.text.indexOf(LVAR1)>-1]]，item.text就是中继器表格的内容列，LVAR1是文本框输入内容。

3.3 全选和全部取消

这个很简单，鼠标单击全选时，让中继器内所有行都选中；鼠标单击全部取消时，让中继器内所有行都取消去选中

今天的分享到这里就结束了，喜欢原型或者有疑问的小伙伴们可以在下方评论处给我留言哦，我们下期见。

本文由 @梓贤Vigo 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自 Unsplash，基于CC0协议返回搜狐，查看更多

责任编辑：

axure 下拉多选 元件_Axure教程：下拉多选列表集合（多选下拉列表+单选下拉列表+分级下拉列表）...相关推荐

  1. axure变成一个小手了_Axure教程：这几个小技巧你一定要知道

    编辑导读:Axure是产品经理在工作中最常用到的软件之一,尽管它的使用范围非常广泛,但是有一些小技巧很多人并不知道.本文作者总结了Axure在使用中的一些小技巧,与你分享. 一.Axure制作页面,当 ...

  2. axure 图片切换图片的交互_Axure教程：在动态面板里面设置图片自动/手动切换

    原标题:Axure教程:在动态面板里面设置图片自动/手动切换 本文作者分享自己做过的一个PC端的高保真原型,来教大家,如何在动态面板里面设置图片的自动和手动的切换. 给大家分享自己做过的一个案例,来自 ...

  3. axure 图片切换图片的交互_Axure教程：首页图片轮播

    图片轮播是各大网站常常见到的形式,文章带我们学习了如何用Axure实现图片轮播功能,一起来看看~ 双11刚过没多久,大家是否都参加了2000+亿的大项目呀?剁手的时候,有没有被各大电商平台的首页图片轮 ...

  4. axure树形表格_Axure教程：Axure中继器实现动态树结构控件详解

    树结构是原型设计中常用的控件之一,常用于组织架构等功能.本文作者参照钉钉后台组织架构样式,使用Axure中继器实现动态树结构控件. 一.交互样式 初始样式(以钉钉后台-通讯录-组织架构为例): 初始载 ...

  5. 【原型设计】第二节：Axure RP9制作自己的元件库的操作教程

    本篇文章为axure 的自定义元件库教程 适用版本:axure rp9 安装完毕后我们的axure,接下来我们优先说下自己的元件库该如何创建和进行使用. 元件库的制作方法 步骤一. 打开axure软件 ...

  6. axure如何竖立文字_AXURE教程：中继器实现穿梭框功能

    在用Axure的时候,怎么通过中继器实现穿梭框功能呢?本文分享了一个方法. AXURE中的中继器是非常强大的底层组件.我们利用好中继器的强大功能,可以为我们原型设计带来很多便利,今天我们要介绍的是如何 ...

  7. axure 元件_Axure流程图制作

    本文章为网上学习记录,仅供参考. 打开axure工具,在元件库中选择[Flow],表示切换到流程图的元件库中. 2.圆角矩形代表开始流程,从元件库中拖入一个圆角矩形,双击编辑文字. 3.菱形代表判断的 ...

  8. jquery复选框选中及下拉框选中指定项(删除项)

    (1)复选框选中及下拉框选中指定项(删除项) <%@ taglib prefix="form" uri="http://www.springframework.or ...

  9. 下拉框系统甄选火星推荐_下拉框词工具都选16火星软件,下拉框词工具佳选23火星...

    现在是十人九商的时代,产品种类和数量日益增多,竞争也在不断加大,微商切忌过长时间消耗在熟人市场,因为你的朋友圈熟人购买是有限的,等她们用完再回购需要时间,做久了你会发现,当你把原有的朋友圈子都卖完了, ...

最新文章

  1. 图解Oracle存储过程教程
  2. ora-01950 对表空间无权限
  3. python语言的数据类型图解_Python基础——数据类型(图解+实例，非常详细！)
  4. 10.14-10.20学习总结
  5. android AChartEngine源码
  6. weblogic下载
  7. java 万年历_java实现万年历
  8. Ubuntu16.04安装PostgreSQL并使用pgadmin3管理数据库_图文详解
  9. SMART原则助你设定有效目标
  10. 汽车电子嵌入式相关知识
  11. 智能路由器-OpenWRT 系列六 （远程迅雷离线下载）
  12. Java实现word文档转换图片功能
  13. BZOJ4223 : Tourists
  14. Java8 Stream：两万字博文教你玩转集合的筛选、归约、分组、聚合
  15. HIVE：窗口函数，用sql语句查询MySQL安装路径和版本
  16. 别坐在金矿上捡垃圾：给管理者的10条建议
  17. canvas + JavaScript实现幸运大转盘
  18. maya 中切换当前渲染器的方法和设置
  19. 你所浪费的今天，是昨天死去的人奢望的明天。你所厌恶的现在，是未来的你回不去的曾经
  20. 如何建设一个优质的企业网站？

热门文章

  1. 2020 AI前沿交流大会 | 聚焦CV/NLP最新学术及工业界实践
  2. 当支持向量机遇上神经网络：这项研究揭示了SVM、GAN、Wasserstein距离之间的关系...
  3. 最常用 150 个Linux命令汇总(建议收藏)
  4. 万万没想到，坤坤洗白的第一步是周琦…
  5. 看完这篇缓存双写分析，你面试不再有问题呢~
  6. 模式设计概述：反应器(Reactor）模式
  7. Django源码分析10：makemigrations命令概述
  8. Django项目中的子项目中自动生成自己想要的文件内容
  9. 脚本文件直接执行python代码
  10. Numpy中矩阵运算