需求：下拉框实现多选，并可将选择内容显示在文本框中及通过文本框将选中项删除

提示：拆解需求，分步实现


提示：以下是本篇文章正文内容，下面案例可供参考


一、实现下拉框多选

1、先拉个矩形，并在矩形里绘制下拉框的内容

2、复制一份下拉选项，为绘制选中后的下拉项内容做基础

3、调整左侧基础样式及在右侧的下来选项中绘制选中后的样式

（1） 选中的样式是字体加粗并出现在选项后面出现对号图标

（2） 给所有选项都设置鼠标悬停事件（出现背景色）

4、给选中前和后的选项元件绑定交互事件，实现自如切换的效果

（1）给用到的元件命名



（2）侧默认选项绑定单击事件：显示选中后的对应元件，隐藏当前默认元件



（3）右侧选中后的选项绑定单击事件：隐藏选中后的对应元件，显示当前默认元件



（4）将选中后的选项隐藏，与默认选项放在同一坐标位置（覆盖）

5、效果

（1）默认选项悬停效果



（2）选中下拉项效果



（3）选中下拉项后悬停效果



（4）取消选中效果

二、将选中内容出现在文本框中

1、将下拉选项内容全部移动到动态面板中

（1）给动态面板命名，方便触发交互事件



（2）绘制文本框

3、将文本框与下拉框联动

（1）绑定交互事件：获取焦点时显示动态面板



（2）将动态面板隐藏（默认为隐藏）



（3）效果

4、将选中的下拉内容显示在文本框中

（1）将图标与元件绑定组合后命名



（2）给图标绑定交互事件



（3）绘制文本框中要显示的选项内容，并调整样式



（4） 将要显示的选项内容放在文本框中，并隐藏

A、顺序要与下拉框内容一致，否则会出现混乱

B、各选项元件之间错开些间隙，会更美观一些



（5）给动态面板中的选项绑定交互事件


绑定事件时，可将元件调整到自定义情况，绑定完成后，别忘了将元件恢复原样

A、点击默认选项后，显示文本框中对应的选项内容



B、点击选中后的选项，隐藏文本框中对应的选项内容



（6）效果

三、删除文本框选项

1、给文本框中选项内容上的图标，绑定隐藏事件

2、给文本框选项中的图标绑定动态面板中选项的显隐事件

3、效果

到此，完整的实现了，可通过下拉框多选，并将选中内容展示在文本框中，同时，可以通过删除文本框中的内容改变下拉框中选项的选中状态

四、优化

1、调整元件样式：根据实际需求，自定义调整

（1）加入图标，并调整样式



（2）去除外边框及调整大小



（3）面板设置阴影

2、绑定组合，并命名

3、调整文本框交互事件

4、默认隐藏‘’下拉框面板内容‘’

5、效果

（1）默认内容



（2）单击文本框 显示/隐藏 下拉框



（3）选择下拉框中的选项，选项出现在文本框中



（4）删除文本框中内容，下拉框中的选项取消选中

总结

提示：需要注意的是，增加和删除选项，要按照顺序来，毕竟Axure的设计不如代码控制那么自如，这也是此次案例中的不足之处。


元件文件

，已上传，有需要的可以下载，没积分或者不方便下载的可私信留下邮箱，看到后回复