# Dropdown Next and Previous Buttons

**URL:** <https://forum.inductiveautomation.com/t/dropdown-next-and-previous-buttons/73204>\
**Category:** Ignition\
**Tags:** perspective, ignition81\
**Created:** [May 3, 2023, 2:05pm UTC](https://forum.inductiveautomation.com/t/dropdown-next-and-previous-buttons/73204 "2023-05-03T14:05:12Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![amarks](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/amarks/32/45610_2.png) [@amarks](https://forum.inductiveautomation.com/u/amarks)\
**Post date:** [May 3, 2023, 2:05pm UTC](https://forum.inductiveautomation.com/t/dropdown-next-and-previous-buttons/73204/1 "2023-05-03T14:05:12Z")

</div>

A while ago I had found a way to get the [selected index](https://forum.inductiveautomation.com/t/dropdown-selected-label-value-label/69112/9) from a dropdown component using a value change script on the `value` property. I've found a much better (cleaner, more direct) way to do this, and it is a much better way to achieve my initial goal:

> [@Dropdown Selected Label (Value Label)](https://forum.inductiveautomation.com/t/dropdown-selected-label-value-label/69112/6):
>
> My reason for wanting to do this was to add buttons that would go to the next or previous item in the list.

Rather than have extra properties that rely on a change script to search through the options array, rely on the `value` property to **always** be equal to the index and simply add prop(s) for each object in the `options` array. This extra prop can then be the "value" that you would have used elsewhere (bindings, etc.). The dropdown will still grab the `value` and `label` props for use. Because we have the index of the options array, it's easy to get the associated props. (\*not to mention that searching through is inefficient to begin with.)

1. Create the array of objects for the options list.

2. Now, the selection of the dropdown gives the selected index (via `value`) so it's easy to get the `tag` with a binding to the options array. Create a property on the dropdown component to hold the `selectedTag`.

3. Now the buttons become quite trivial. Increase/decrease the value by one and check bounds.

```auto
def runAction(self, event):
	val = self.getSibling("Dropdown").props.value
	count = self.getSibling("Dropdown").custom.options_count
	
	if val > 0:
		self.getSibling("Dropdown").props.value = val - 1
	else:
		self.getSibling("Dropdown").props.value = count - 1

```

(where `count` is a custom property on the dropdown : `len({this.props.options})` )

 ![image](https://us1.discourse-cdn.com/inductiveautomation/original/3X/3/c/3c123d994ed81434687a4257d4070773656da411.png)

An example like this might be a good addition to the [manual](https://docs.inductiveautomation.com/display/DOC81/Perspective+-+Dropdown).

@mdemaris

---

<div class="post-metadata">

**Author:** ![mdemaris](https://sea1.discourse-cdn.com/inductiveautomation/user_avatar/forum.inductiveautomation.com/mdemaris/32/54639_2.png) [@mdemaris](https://forum.inductiveautomation.com/u/mdemaris)\
**Post date:** [May 5, 2023, 9:24pm UTC](https://forum.inductiveautomation.com/t/dropdown-next-and-previous-buttons/73204/2 "2023-05-05T21:24:00Z")

</div>

That looks pretty clean! Going to have to bookmark this for reference when I do more work with tags. Current focus is using mostly queries.