Guten Tag!

Many greetings from Munich, Germany. Today we are creating a dropdown menu for our weather app to make our user interface more dynamic. And surprisingly we will not use Shiny for that.

As always, you can find all of the code snippets on GitHub.

A simple dropdown menu

First, what we need is a select tag with options.

This will give us a simple dropdown menu with two options. It doesn’t yet look like something that could go into our weather app but we’ll get there. For now, let me mention the value attribute of the option tag. It is best practice to set the value as well as the text of the option.

That way, you can have some nicely formatted text in the dropdown menu for the user to see while the value is a more machine-readable version of the text. Here, we can set the value to the city name without spaces or commas.

More options

Right now, we have to write out each option manually. This can get tedious really fast when we have a lot of city names. Hence, let us create a function that generates the options for us.

Now, we can just use the map function to iterate over a vector of city names and create the options for us.

Make the dropdown interactive

The next thing we can do with the dropdown menu is to make sure that it actually does something when we select an option. That’s where the onselect attribute comes in.

We can set it to a JavaScript function that will be called whenever the user selects an option. Don’t worry we won’t do anything too fancy here. We’ll just use the alert function to show a generic message.

Nice! Whenever a new city is selected, we get a popup message that says “You selected a city!”. Now, we can replace that message with something more useful. For example, we can show the value of the selected option. This works in three steps:

1. Use the document.getElementById() function to get the dropdown menu.

2. Get the value of the selected option from the dropdown menu via value attribute of the dropdown menu that you can access with the . operator.

3. Stick that into the alert() function.

For all of this to work, we need to give the dropdown menu an id attribute. So let’s do all of that in one step.

Cool! Now we have a dropdown menu that shows the selected city in a popup message. And remember how we set the value of the options to be the city name without spaces or commas? We see these modified names in the popup message now.

Style your dropdown

Alright, we have a dropdown menu that can tell us which city was selected. But it doesn’t look particularly nice in our weather app. Here’s how the dropdown menu looks in our app right now.

So the first thing we should do is make the dropdown menu background transparent and get rid of the border. That way, the dropdown menu will look exactly like the weather app background.

Sweet! All we have to do now is to style the text of the dropdown menu.

Style the options

That’s almost perfect! But look what happens when we try to select a city:

We cannot really see a thing. That’s because the options use a white background by default and now a white text color. That’s not great. Unfortunately, setting the background color of the options to transparent doesn’t work here. So instead, we just set it to a very similar blue color.

And with that we do have a nice dropdown menu:

Nice, so now we have a nice lookin’ dropdown menu that can tell us what city was selected. Next step is to make sure that the displayed temperatures change when the city is changed.

To implement that, we’ll use a fun little Quarto trick next week. So stay tuned and if you have any questions don’t hesitate to reply to this mail or contact me on LinkedIn.

See you next week,
Albert 👋

Enjoyed this newsletter and found something helpful? Here are other ways I can help you:

• My playlist on YouTube

• Free book: Yet Again - R + Data Science

• Free book: Beautiful tables with {gt}

• Blog posts