Spelchan.com Logo

From Scratch Web Games: A Beginners Guide to Game Development using HTML, CSS, and JavaScript

Chapter 5.10: Option Select

Often you want users to select from several options but do not want to have a list of items. This is possible by using the Select element. This element, like other lists, is a compound tag so that you have the select tag and within it are option tags. If you want to get fancy you can have the option tags grouped into optgroup tags.

At the outside of this compound element is the select tag. It can be used in forms to submit the value of the elected option by using a name attribute in the tag. Normally you would then have a list of options that the user can select from. Each option element is an option that can be selected with the value of that option being the value sent to the server.

The content of an option tag is restricted as browsers tend not to support non-text tags. Despite not having support for images, you can take advantage of Unicode to add images to an option and can style options within the option tag to make your options more colorful. The downside to having colors is those are lost when the colored option is selected. Here is an example of a colorful select statement:

<label>
Select a card suit:
<select id="suit">
<option value="Club" style="color:green">&clubsuit; Club</option>
<option value="Diamond" style="color:blue">&diamondsuit; Diamond</option>
<option value="Heart" style="color:red">&heartsuit; Heart</option>
<option value="Spade" style="color:black">&spadesuit; Spade</option>
</select>
</label>


Of course, in order to find out what option you selected, you simply need to grab the value from the element. The value, however, does not need to match the contents of the option. This can be useful as you can set the value to something useful to your code even if it is not useful to the user as the user only sees the content. Here is the code used to find which suit was selected:

let suit = document.getElementById("suit").value;

The option tag does have a few attributes that you may want to take advantage of. If you do not want the first option to be the default, you can use the selected attribute to specify which option you want to be the default. Only one option can be the default unless you are using the multiple attribute. Likewise, if you want some options to be unavailable at the time but still visible, you can use the disabled attribute to disable them. Here is an example of using these attributes.

<label>
Select a Face Value other than 4:
<select id="faceValue">
<option value="1">Ace</option>
<!-- … -->
<option value="4" disabled>Four</option>
<option value="5">Five</option>
<!-- … -->
<option value="10">Ten</option>
<option value="11" selected>Jack</option>
<option value="12">Queen</option>
<option value="13">King</option>
</select>
</label>


If you want to break your selections into groups of related options, you also have the optgroup tag. This tag has the options that are part of it’s group inside the contents area with the required value attribute being the name to display for the option. Here is an example:

<select id="card" >
<optgroup label="Clubs">
<option value="CA">Ace of Clubs</option>
<!-- additional clubs here -->
</optgroup>
<optgroup label="Diamonds">
<option value="DA">Ace of Diamonds</option>
<!-- additional diamonds here -->
</optgroup>
<optgroup label="Hearts">
<option value="HA">Ace of Hearts</option>
<!-- additional hearts here -->
</optgroup>
<optgroup label="Spades">
<option value="SA">Ace of Spades</option>
<!-- additional spades here -->
</optgroup>
</select>


You will notice that we are using short codes for indicating the cards. If we wanted to get the card names, we would have to access the options within the select element. This is something we can do, but does require knowledge of arrays. I will show the code for doing this below, but don’t worry if you can’t understand the code yet. It will make sense once we cover arrays in Chapter 7. This code finds the index that the selected option is at. As -1 is the value if no option is selected, we want to change it to 0 (the first option) if nothing has been selected. We then get the text from the options that the element has. The [] is used to indicate array access so it is saying grab the option that is at the indicated index.

let card = document.getElementById("card");
let indx = Math.max(card.selectedIndex, 0);
let cardname = card.options[indx].text;

We mentioned a bit earlier that the multiple attribute lets users be able to select several items. When this attribute is selected, a list box is presented instead of a drop-down menu. You can specify the number of items that are shown at a time by setting the size attribute. The tag

<select id="cards" multiple size="8">
<!—place options (and even optgroups) here -->
</select>

Dealing with multiple selections also requires using arrays so you may want to revisit this code after you have finished Chapter 7. Multiple selections have a selectedOptions result which we are storing in the cards variable. This would be an array of options which we traverse and add as list options to an inner HTML String we are building.

let s="<p>The cards that were selected were:<ol>"
let cards = document.getElementById("cards").selectedOptions
for (let i = 0; i < cards.length; ++i)
s += "<li>" + cards[i].text + "</li>";
s += "</ol></p>";

Some of you may be wondering why this isn’t also an input type. The answer to that will be revealed in our next section.

Chapter contents

Chapter 5 Contents

5.1 Forms Cheat Sheets

This chapter's summary cheat sheet.

5.2 The client-server model

How forms are traditionally used.

5.3 The Form tag

How to set up a form in HTML.

5.4 Inputting text

Getting text input from the user.

5.5 Specialized text formats

Making your input fields more specific and semantic.

5.6 Form cosmetics

Making forms look more like printed forms.

5.7 checkboxes & radio buttons

How to use Checkboxes and Radio buttons.

5.8 Numbers and Dates

Using numbers and dates gives your user better GUI controls.

5.9 special purpose input types

The reset, button, image, color, and file input types.

5.10 Option Select

The select element lets users select options from a drop-down list.

5.11 Data Lists

The datalist elements lets you create pull-down lists for input elements.

5.12 Output

Displaying values in a form.

5.13 dialog box concepts

Built in dialog boxes and pre-dialog tag handmade dialogs.

5.14 using dialog boxes

The <dialog> tag and using it to create dialog boxes.

5.15 Validating forms

Review of validating forms in HTML.

5.16 JavaScript Validation

How to use JavaScript to prevent invalid forms from being submitted.

5.17 Project: Trivia

Chapter project: Trivia game

5.18 Trivia Project Solution

Solution for the Trivia gaame

← previous section
Special Input
next section →
Data Lists
Table of Contents