Using single-choice dropdowns

Single-choice dropdowns are a standard HTML component. Their usage, although straightforward, can sometimes be frustrating, both for the developer and the user. The browser requires that a "selected" attribute is added to the selected item. To set the value of the select element programmatically, the code must first find the item which is presently selected and remove its "selected" attribute, then find the item that has the specified value and add a "selected" attribute to it.

However, the developer might want an easier way to specify the value of the dropdown field. Simply adding an attribute containing the value should be enough. In this recipe, we're going to solve this problem by adding a new attribute to dropdowns.

How to do it...

Let's get started.

1. We will create an HTML page with a dropdown. In HTML, dropdowns are made with a select element. To add selection options, we add one or more option elements inside the select element. Normally, we would specify...