# Unit 4 Drop down menu

**URL:** <https://forum.code.org/t/unit-4-drop-down-menu/32388>\
**Category:** CS Discoveries\
**Tags:** csd-unit-4\
**Created:** [March 5, 2020, 1:03pm UTC](https://forum.code.org/t/unit-4-drop-down-menu/32388 "2020-03-05T13:03:44Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![lnelson](https://avatars.discourse-cdn.com/v4/letter/l/9d8465/32.png) [@lnelson](https://forum.code.org/u/lnelson)\
**Post date:** [March 5, 2020, 1:03pm UTC](https://forum.code.org/t/unit-4-drop-down-menu/32388/1 "2020-03-05T13:03:44Z")

</div>

How do I make a drop down button work in app lab? A student wants to have them use a drop down to go to the next screen based on what they pick. Is there a way to do this? Thank you for your time and help!

---

<div class="post-metadata">

**Author:** ![mwood](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/mwood/32/4941_2.png) [@mwood](https://forum.code.org/u/mwood)\
**Post date:** [March 5, 2020, 1:31pm UTC](https://forum.code.org/t/unit-4-drop-down-menu/32388/2 "2020-03-05T13:31:09Z")

</div>

@lnelson, good morning! Yes, that can definitely be done. Here’s a link to a previous post in the forum where this functionality is demonstrated.

> [@4.13 Drop Down Help](https://forum.code.org/t/4-13-drop-down-help/14376/2):
>
> Dropdowns are bit more complicated than buttons because we need to add a conditional inside the event to check which option was selected. Because this is beyond the scope of programming, students may have to move to the full App Lab to get access to these commands. Assuming a dropdown with id “menu”, your code might look like: onEvent("menu", "change", function(event) { var choice = getProperty("menu", "value"); if (choice == "Red") { setScreen("red"); } else if (choice == "Green") { …

Good luck!

Mike

---

<div class="post-metadata">

**Author:** ![koliner](https://avatars.discourse-cdn.com/v4/letter/k/f04885/32.png) [@koliner](https://forum.code.org/u/koliner)\
**Post date:** [April 18, 2023, 12:11am UTC](https://forum.code.org/t/unit-4-drop-down-menu/32388/3 "2023-04-18T00:11:47Z")

</div>

Could I get a bit more information about the difference between 'onEvent (“dropdown”; “change”; variable) and (“dropdown”; “input”; variable)  
My students are using them as if they are interchangeable and they seem to work the same:  
[Using “change”](https://studio.code.org/projects/applab/83S1nDAaLTptnt2CM-PdPuRjqfqfQiKEKilqNWZ8RnU)  
[Using “input”](https://studio.code.org/projects/applab/Mvg8BvUtphqTQafmR7UHlYaPvLfXTyvSjc0eWwTMeeU)

These are in Unit 6 but you can click “Run Without Board”

---

<div class="post-metadata">

**Author:** ![mwood](https://sea2.discourse-cdn.com/flex016/user_avatar/forum.code.org/mwood/32/4941_2.png) [@mwood](https://forum.code.org/u/mwood)\
**Post date:** [April 19, 2023, 4:59am UTC](https://forum.code.org/t/unit-4-drop-down-menu/32388/4 "2023-04-19T04:59:12Z")

</div>

@koliner,

Good question. If you look at the [documentation for “onEvent”,](https://studio.code.org/docs/ide/applab/expressions/onEvent) you will see that change and input are very similar. In a dropdown, they are the same. Using a different kind of input, it appears that “change” requires pressing the enter key and “input” doesn’t.

Here’s the javascript documentation from Mozilla web docs…

**Note:** The `input` event is fired every time the `value` of the element changes. This is unlike the [`change`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) event, which only fires when the value is committed, such as by pressing the enter key, selecting a value from a list of options, and the like.

This makes them interchangeable with a drop down list.

Mike