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! I know at the end of last week’s episode I mentioned allowing the user to add their own list of dropdown options but we need to improve the user experience before we move on. See how buggy these dropdowns are? What if the user wants to reorder their selections? This week, I will walk you through dynamically adding and removing dropdown options based on user selection while persisting the index of the dropdown options so that they are always in the same order. We will also discuss the differences between JavaScript objects and object arrays as well as the functionality of the JavaScript equals operator when assigning variables to existing objects.

The code for the static web page we will begin with in this lesson is the code we ended with last week. You can 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!

In honor of Star Wars: The Force Awakens, I have updated the CSS to use Star Wars colors and now we will sort Star Wars characters vs. superheroes. But I left the existing function and variable names in tact because after all we are still talking about heroes!

Okay so the first thing we need to do is create a few new variables. We need to keep track of the options that have been selected (in previous episodes we used the heroesArray but we will change that), the remaining options, and a constant containing all of the available options. I have made the constant options and remainingOptions arrays containing JavaScript objects. You can always tell an array apart from an object because an array uses square brackets and an object uses curly braces. Notice how I have not set remainingOptions equal to the constant options. There are two reasons for this. Number one, we do not need to store the default option in the remainingOptions array because we will implement logic to ensure that the default option is always present in the dropdown. Second, when you use the equals operator to assign a variable it creates a reference to the same data. JavaScript does not copy the value so if you set a variable equal to another variable, both variables will always be the same value. This is a pro tip that will save you a lot of time debugging! Lastly you can see that I have changed the name of our heroesArray to selectedHeroes because I like continuity in my variable names!

Real quick we need to update the populateDropdowns function. Since we changed the options JavaScript object to an array, we need to change the second loop to a regular for loop vs. a for…in loop. A good rule of thumb is to use a regular loop for arrays and a for…in for objects.

Next I’m going to add a reusable function findWithAttr. This function will take in a few parameters: array, attribute, value, and return value. This will be used to find a specific value in an array by the specified attribute and return any value from the array. We will use this to look up options by id and return values such as the text and index.

In the updateDropdowns function, since we are now keeping track of the selected options and remaining options, we also need to add a variable for deselectedHero. That way, if a user changes an option, we will know what option they deselected so we can add it back to the subsequent dropdowns. Then we add a simple if statement to see if the deselected option exists and it is not already in the remainingOptions array. If so, then we create a new JavaScript object using the findWithAttr function to set the id, value, and index of the deselected option and add it back to the remainingOptions array. I have also logged these values to the console. I prefer using the console for debugging vs. alerts.

Next, we’re setting some more variables and logging information to the console. We’re adding the dropdownid and selectedHero to the selectedHeroes JavaScript object, then removing it from the remainingOptions using the splice method.

Now the real fun begins! First of all, we want to make sure that we are checking each dropdown when any dropdown is updated to make sure we never remove the default value. Also, if an option has been deselected, we want to add it back to all dropdowns. But we need to also make sure the dropdown options are always in the same order which is why we added the index property to the objects in our options arrays.

Let’s walk through this code. First, we are looping through all of the dropdowns on the page. For any dropdown that is not equal to the current one, we loop through the options in every dropdown and remove the selectedHero as long as it is not the default option. Outside of the options loop, we need to check to see if there is a deselectedHero and if that is not the default option then we need to add that back to the current dropdown. This is why I made variables for the deselectedHero at the top of this function because they are reusable. Using the add method, we add the deselectedHeroOption and index which will keep the option in the same position in the dropdown because we are just that good!

Save and load your page. Make a few selections and then go back and change them. Now you have created an excellent user experience that is easy to understand and navigate. Sometimes functionality like this is not a part of your project plan, technical specs, etc. but you should always take the initiative to create an excellent user experience. Next week, we will continue to add to this page. We may have improved the user experience but now the sort functionality is broken so we will need to fix that! Until next time, have a great week and Happy Coding!

Completed Code

Have a great week and Happy Coding! #LearnLoveLiveCode And May the Force Be With You!