dropdown

Category:UI Controls

Creates a dropdown selection box on the screen displaying the options provided and referenced by the given id at default location (0,0).

Your apps will sometimes need to collect specific input from the user, instead of unrestricted input using textInput(). You can code an event handler that is triggered by various events in the dropdown box. Use getText() to get the option currently chosen in the dropdown.

Examples

//Get the user's mood.
dropdown("id", "happy", "sad");
onEvent("id", "change", function(event) {
  write(getText("id"));
});

Example Simple Form

Demonstrate UI element modification and query functions.

// Demonstrate UI element modification and query functions.
textLabel("subjectLabel", "What subject do you like the most?");
dropdown("subjectId", "Arts", "Science", "History", "Math");
button("submitID", "Submit");
onEvent("submitID", "click", function(event) {
  console.log(getText("subjectId"));
  setText("subjectId", "____");
});

Syntax

dropdown(id, option1, option2)

Parameters

Name	Type	Description
id	string	The unique identifier for the dropdown box. The id is used for referencing the text input box in event handlers or other UI element modification functions. Must begin with a letter, contain no spaces, and may contain letters, digits, - and _.
option1	string	The text displayed within the dropdown box.
option2	string	The text displayed within the dropdown box.

Returns

No return value. Modifies screen only.

Tips

If there is another UI element at location (0,0) the dropdown box is placed at the next available position to the right or below.
There are various UI element modification functions available: setText(), showElement(), hideElement(), deleteElement(), setPosition(), setSize().
There are various UI element query functions available: getText(), getXPosition(), getYPosition().
You should always provide a label for your dropdown box.
Dropdown boxes can also be created and initialized in Design mode.

Found a bug in the documentation? Let us know at documentation@code.org