Dropdown
A dropdown is a user-interface control that presents a set of choices for user selection, often revealing them when activated.
A Pythonic Adventure: From Python basics to a working web app
A select element is an HTML form control that presents a list of options from which a user can choose.
- How it is used
- Collects drink, flavor, and topping choices for a coffee-order form.
- How deep it goes
- Demonstrates select construction, option lists, names, and Flask retrieval without detailing validation or browser internals.
- Examples
- Uses coffee, chocolate, and decaf menus plus flavor and topping selections in a coffee shop order.
- What you can do after
- Build it from scratch as named HTML menus whose submitted choices a Flask handler can display.
Read how A Pythonic Adventure: From Python basics to a working web app explains dropdown →
The Well-Grounded Data Analyst
A Streamlit input widget that displays selectable options in a dropdown control.
- How it is used
- Deploys drop-down menus in Streamlit proof-of-concept apps to filter data interactively and refresh analytical outputs.
- How deep it goes
- Explains selectbox layout, placeholders, dependent options, filtering, and downstream metrics, while deferring broader Streamlit features.
- Examples
- Uses county, town, and street selectors in a Welsh house-price explorer, alongside metrics, charts, and filtered raw data.
- What you can do after
- Build interactive Streamlit filters that drive pandas queries and update summary metrics, visualizations, and tables.
Build Python Web Apps with Streamlit
A dropdown is a user-interface control that lets a user choose one or more options from a list revealed on interaction.
- How it is used
- Lets users select source and destination units, with available choices tied to the selected quantity.
- How deep it goes
- Explains options, returned selections, and default indexing, but does not detail widget internals.
- Examples
- Uses From and To unit selectors with choices such as kilograms, grams, pounds, and ounces.
- What you can do after
- Apply it via Streamlit’s `st.selectbox` to present options and set an initial selection.
Read how Build Python Web Apps with Streamlit explains dropdown →
React Quickly, Second Edition
A select box is an HTML control that lets a user choose one or more options from a list.
- How it is used
- Uses dropdowns to capture choices such as task priority or the user shown on an administrator dashboard.
- How deep it goes
- Explains controlled single-select values and option elements, then outlines multiselect state and selected-option extraction.
- Examples
- Uses task priority, a multiselect list of people, and an administrator choosing which user’s dashboard to view.
- What you can do after
- Build it from scratch by binding a select to state and updating the chosen task priority.
CSS in Depth, Second Edition
A dropdown is an interface control that reveals a list or panel of selectable options when activated.
- How it is used
- Uses dropdowns to demonstrate positioned menus and transitions for opening and closing them.
- How deep it goes
- Explains menu markup, click handling, positioning, and opacity or height transitions.
- Examples
- Builds a Main Menu with links, then uses a separate menu to demonstrate fade and height effects.
- What you can do after
- Build a click-operated menu by toggling an open class and positioning its panel outside normal flow.
Tiny CSS Projects
A select element is an HTML form control that presents a list of options from which a user can make a selection.
- How it is used
- Styles a native select in a contact form to coordinate with other form controls.
- How deep it goes
- Applies shared control styles, a background color, and a hover cursor, then stops short of fully restyling native options.
- Examples
- Uses a contact-form select with a card-colored background and a pointer cursor on hover.
- What you can do after
- Apply CSS to align a native select with other form controls and signal its clickability.
Data Storytelling with Altair and AI
A dropdown menu is an interactive control that reveals a list of choices from which a user can select an option.
- How it is used
- Supports exploratory data visualization while preserving a focused comparison or narrative.
- How deep it goes
- Details four Altair implementation steps and stops short of broader interaction design beyond the exercise examples.
- Examples
- Uses population-by-continent lines, North America comparisons, country selection, and positive-versus-negative trend highlighting.
- What you can do after
- Build it from scratch in Altair by binding selectable values, attaching a selection, and filtering chart data.
Read how Data Storytelling with Altair and AI explains dropdown →
ASP.NET Core in Action, 3e
A select element is an HTML form control that presents one or more options for user selection.
- How it is used
- Uses HTML form selections in Razor Pages, including drop-downs, list boxes, multiselect controls, and grouped options.
- How deep it goes
- Explains PageModel properties, SelectListItem conversion, Tag Helper attributes, grouping, and default-selection behavior.
- Examples
- Demonstrates currency selection, programming-language options, list-box sizing, multiselect binding, grouped options, and an empty choice.
- What you can do after
- Apply it via ASP.NET Core Razor Tag Helpers to render and bind single, multiple, sized, or grouped selections.
Build a Website with ChatGPT
A dropdown list is a selection-list interface that initially shows a compact field and reveals its available choices when activated.
- How it is used
- Uses compact selection lists for forms, filtering records, and choosing sort fields.
- How deep it goes
- Explains display behavior and customization, then connects selection events to filtering or sorting; it stops short of implementation details.
- Examples
- Demonstrates animal, mood, philosopher, vacation, department, instructor, and course-sorting lists.
- What you can do after
- Operate/configure selection lists with chosen options, defaults, multiple selections, row sizes, filtering, and sorting behavior.
Secrets of the JavaScript Ninja, Second Edition
An HTML element that provides a control for selecting among options.
- How it is used
- Uses select as the required container for option markup during HTML-to-DOM conversion.
- How deep it goes
- Explains option containment and shows wrapper-based parsing, but does not detail dropdown selection behavior.
- Examples
- Uses ninja options and self-closing table markup to illustrate HTML preprocessing and wrapping.
- What you can do after
- Apply the containment rule by wrapping option markup in select when converting HTML strings into DOM nodes.
Read how Secrets of the JavaScript Ninja, Second Edition explains dropdown →
Related concepts
- option elementhas part · An option element is an HTML element representing one selectable choice within a select control.
- multiselectproduced by · A multiselect is a user-interface control that allows a user to select multiple options from a set or list.
- Streamlitused by · Streamlit is an open-source Python framework for building interactive web applications, particularly for data and machine-learning applications.
- web formpart of · A web form is a browser interface that groups controls for collecting structured user input and submitting it to an application or server.
- iterableused by · An iterable is an object or value that provides or supports a protocol for producing its elements sequentially.
These guides are generated from the text of Manning books by Manning's knowledge graph and link to the sections they draw on. The full books are available on liveBook and at manning.com.