Watch This Week’s Episode On Our YouTube Channel

Video Transcript

Welcome to Learn, Love, Live, Code – a show where I teach short coding tutorials in 5 minutes or less! This week, I will walk you through creating a series of HTML dropdowns on a static web page and adding the selected values to a JavaScript array. Then, we will loop through the JavaScript array building an HTML string and outputting it to a div. Finally, I will walk you through populating the dropdowns via JavaScript!

The code for the static web page we will begin with in this lesson is the code from the completed Fundamentals of Web Development: Using HTML5, CSS3, and JavaScript YouTube Crash Course. Check out that course here on the HoffsTech YouTube Channel if you have not already! You can also get the code from the transcript of this episode on my blog at HoffsTech.com/learnlovelivecode. The links for all of these things are also in the description for your convenience!

First, remove the entire ul element from the page. We are going to replace this with four dropdowns. To create a dropdown, first we need a select tag including the id and name attributes. Let’s also put our select tag inside of a paragraph tag so our dropdowns are spaced apart. It won’t look pretty at first but we will fix that in the next episode!

Inside of the select tag we will add our options. First, we will add an option that will be selected by default when the page loads. Then, we will add four options including the value attribute and text. Spoiler alert! We will use JavaScript to get these values!

Copy the dropdown including the paragraph tag four times on the page. After we get this easy method to work, we will populate the dropdowns using JavaScript. You never want to repeat the same blocks of code like this in your final product, this is just for testing purposes.

In the JavaScript function sortHeroes(), remove everything up until var sortedHeroes. Now instead of sorting the array alphabetically, we are going to use the values we select from the dropdowns to sort our heroes by rank.

First, we need to set up variables for our dropdowns. To do this, all we need is document.getElementById and the ids of our dropdowns.

Now that we have our dropdown variables, we can get the selected text by accessing the dropdown options by the selectedIndex. Then, we have .text to get the text value. If we wanted to get the value attribute, we would use value instead of text.

Next, we create our heroesArray using the text variables. We do not need to sort the array because we are going to select the sort order manually.

Now we want to loop through the heroesArray and create a simple HTML string to output to a div. We start with a paragraph tag and an ordered list. In our for statement, we set up a new index variable = 0, run the loop until the index variable reaches the end of the array, and add 1 to the index variable after each loop is complete. We don’t want to replace our sortedHeroes variable, we want to add to it so we use += to append more HTML to our string. heroesArray[i] returns the text from the current position in the array. And then of course we close all of our tags and output our HTML string by setting the innerHTML of the sortResults div.

Save and open your html document in a browser. Select some Superheroes from your list and click Sort!

Okay, now that we have that working, let’s do it properly and populate our dropdowns via JavaScript! First, let’s move our dropdown variables and array outside of the functions in our script tag to make them global variables meaning they can be used by any function inside of our script tag!

Next, we need to create a new function, I’ll call it populateDropdowns. This function will run when the page is loaded and it will populate all of the dropdowns. Let’s create a simple string array containing the text for our dropdowns.

Now we want to loop through our array of dropdowns, then inside of that loop we will loop through the options array. We need to use a different index variable in our second loop so that we’re not overwriting the index we created in the first loop. Then all we need to do is create an option HTML element, set the text, and add it to our dropdown. Easy peasy!

And finally we need to run the populateDropdowns function when the page loads.

And of course don’t forget to remove the options we added earlier to our select elements.

Save and open your html document in a browser. Select some Superheroes from your list and click Sort!

Next week we will extend this code by giving some style to our dropdowns and using a key value pair to set both the value and the text for the dropdown plus we will add some ninja error handling!

Completed Code

Have a great week and Happy Coding! #LearnLoveLiveCode