Store your object in your option select (droplist).

Background

While writing a new app that allows you to track your Core Competencies through the year, I stumbled upon a common challenge with the HTML5 Select Option control (droplists).

The Challenge

When you choose the value in the first drop list (Competency Group) I wanted the 2nd drop list (Competency) to be filled with the appropriate values.

Additional Challenge

Further, when and item is selected in 2nd drop list (Competency) I wanted :

1. The appropriate Competency definition displayed.
2. The appropriate Competency Examples added to the form as checkboxes.

Some Code - Adding Item To Select Option

First, let me show you the JavaScript method that you use to add items to a Select Option list.

It's quite easy, you just create a new Option object and call append on your Select Option list.

Sample Code

Here's a quick example:

var value = "1";
var localOption = new Option("Display Text", value , false, false);
$("#competency").append($(localOption));

The arguments to the Option constructor are:

• String: Text which will be displayed in the list
• String: Value which will be used to refer to the item in the list
• Boolean: true if you want the item to be the default selected item
• Boolean: true if you want the item to appear selected

The Recurring Problem

The problems that occur are:

1. All through the code I will need to know which option is selected at any time (which item in Competency list is actually selected).
2. The first problem means that I would have to store the value of the currently selected option and then map it to some other Competency object so that I can display the appropriate values in other places in the code.
3. There is no obvious way to store an my Competency object as the value of the select option since the Option() constructor requires the value to be a String.

The Competency Object

Before I show you the quick solutions, allow me to show you the extended object that I want to store as the value in my Select Option list.

class Competency{
    constructor(item){
        // simple unique id like do-01
        this.value = item.value;
        // text of competency name will display in drop list
        this.text = item.text;
        // longer description of the competency
        this.description = item.description;
        // array of examples 1 to many
        this.examples = item.examples;
    }
    toString(){
        return this.text;
    }
}

The Reason I Want To Store The Object

It'll make all of the code easier because when ever the item is selected in the list all I will have to do is get the current selected item and use the values that it already has in it. This alleviates the problem of mapping the Select Option value to my current selected object. The current selected object will be the object I want. (I'm being a little repetitive here for emphasis, because all of that mapping code would be painful.)

The Solution

There are two things that have driven this solution:

1. I can store only a string as a value in the Option
2. All objects in JavaScript can easily be converted to JSON (JavaScript Object Notation) which is just a String of name/value pairs.

Well, I've practically given the solution away now, so here it is:

// The item in the following Option constructor is my Competency object.

var localOption = new Option(item.text, JSON.stringify(item), false, false);
$("#competency").append($(localOption));

Now, whenever you want to use the object, we just deserialize it back to an object -- when someone has selected one from the list.

var currentCompetency = JSON.parse($("#competency").val());

My example shows:

1. Getting the current value of Competency Select Option drop list
2. Passing the string to the JSON.parse() method.
3. Storing the return from JSON.parse() in a local variable which will now allow me to use it as a Competency object in my code.

// displays description value as an example
console.log(currentCompetency.description);
// displays all text from examples array (of Strings)
console.log(currentCompetency.examples.join());

Similar To C# WinForms

This is a much cleaner way to use Select Option lists and is something similar to what we do in C# WinForms development when we store an object in the Tag property of a Windows control object.

I hope you find this helpful and/or interesting.