Product axure9 English version, using repeater repeater to realize drop-down multi selection box

1. demonstration

2. operation

Use default default Make style

Pull in repeater, Delete the shape , Pull in a Label,

adjustment repeater Spacing and typesetting in

That means repeater Place in one row 4 Elements

repeater BOC delete

choice repeater Assign a value , And will repeater rename ” Item selected list “

Pull in one by the side label, name ” Counter “ Keyboard entry 0 （ The reason will be said later ）

Choose the following dance options , add to interaction




Only this and nothing more , What dancing contains interaction as follows

Next, set the counter interaction
（ The general meaning is ： Check your hobby , The default prompt will disappear automatically , When there is no hobby , Automatically , With the help of the medium of counter , When checking hobbies , Counter ＞0, Otherwise, the counter is 0）


Go dancing there and set off this counter time , The two need to be linked

here fireEvent The specific operation of the event is as follows
Event The reason behind this is Loaded event , Because when we set the default prompt , Namely Loaded( You can check it by yourself ” Default prompt “ Of interaction To verify )

The production effect at this time is as follows

Now let's start to solve the problem of adaptive height in the selection box

The function formula is like this ：[[LVAR1.y+LVAR1.height+15]]
The reason for setting rotated event , Because for this component , This is an event that will never trigger , You can use either one , Just make sure that you don't get triggered on this page .
（ The meaning is explained in the figure , Blue is measured by yourself , Pink is LVAR1.y,repeater Your height is LVAR1.height. If the understanding is wrong , Please correct me. ）

Set the following section to dynamic panel （ Convenient adaptation ）
Return to the drop-down background box , Set to make the following adaptive size
[[background.height]]

Go back to dancing , Need to trigger the drop-down background rotated To make it work

stay unselected Also set up in

The event that will dance , Copy to other ping-pong music and other options

Add one in the triangle hotspot

Added to interaction as follows


At the end of the day , Select all as one dynamic panel

Put the counter anywhere send to back Can be hidden

Here we are , All functions are completed .
Here's why we need to set the counter , There is a post , It avoids global variables , You can reuse it as a control , If you don't believe it , You can save the counter , Adopt the mode of global variables , Copy and paste into another document , It doesn't matter …

---

Originality is not easy. , Also for their own better learning , Over time, prevent forgetting .
If there is a mistake or a better way , Welcome criticism and correction .