Accessing Select Box Text

The text this lesson refers to is the text visible in a select box:

<option>Some Text

We can use JavaScript to read the text of the selected <option> as well as dynamically write text to our select boxes.

The JavaScript object reference we use for text is just like the one we used for "value", except we substitute "text" for "value".

document.form.box.options[document.form.box.options.selectedIndex].text

The above would return the string of text typed after the selected <option> tag. This would be "Some Text" if applied to our first example.

Writing Select Box Text

Not only can we read the text, we can write it! We can write VALUEs dynamically, too. This means that we can make a menu that dynamically changes as in this example.

You'll notice that asterisks are placed around any option you select in the example. This requires that we read the original text, store it in a variable, add asterisks, and write the new string to the box.

Here's how we read the original text and store it in a variable. Note: I called my form "form1" and the select box "berries". Also notice that I used a variable "box" to hold the parent "document.form1.berries.options" object:

function changeText(){

var bulk = document.form1.berries.options;
var old_text = bulk[bulk.selectedIndex].text;

The above puts the value of the text of the selected option into the variable "old_text". Now we can easily add the asterisks:

function changeText(){

var bulk = document.form1.berries.options;
var old_text = bulk[bulk.selectedIndex].text;

bulk[bulk.selectedIndex].text = "* " + old_text + " *";

The only trick to the above is that we assign the "text" property a value instead of reading the value. This is done with a simple equals sign. Nothing to it. The value is a string containing asterisks and spaces on the ends and the "old_text" in the center.

Now, whenever an option is selected, it is read and rewritten on the spot. Don't let the "bulk" object confuse you. It's just a variable set to the "document.form1.berries.options" object to save typing. I want you to get used to this technique.

Dynamic Box Overview

If we can dynamically write both the text tags and values of <options>s, we should be able to write a whole select box dynamically using JavaScript. And, in fact, we can. This used to be a fairly common technique used to navigate large sites, but has been mostly replaced by pop up menus. These dynamic boxes still come in handy for forms, though.

The key behind making a dynamic select box is to make arrays that hold the text and values we want to use and then have some way to pick which array we want to populate the dynamic select box. We'll only be using the "text" property in this tutorial.

Look at this example. You pick a topic in the first select box and your choice populates the second box with relevant text. I didn't code any values for the second box, just some text. This is for the sake of simplicity. We'll be making more complex dynamic boxes in the next lesson.

The steps for making a dynamic box are:

1) Figure out the main topics and make the main box. In our current example, I coded the text to equal the name of a subtopic. This text will be used as an array name later.

2) Make arrays containing the text you want presented in your second box. Code the second box with plain, empty <option> tags. Your arrays will go in your <script> and the <select> goes in your form's HTML.

<select name="secondbox">
<option>
<option>
<option>
...
</select>

You need to code as many <option>'s as you have elements in the longest array. Later, we'll learn how to write the <select> code automatically, but for now just code it manually. Don't add any values or text to the <option>s.

3) Find which option the viewer selected and which array to use to populate the second box.

4) Use a loop to write the text in the second box. In the next lesson we'll be writing values, too.

The Arrays

You should already know how to code the boxes, so we'll begin the details with the arrays used to populate the second box. Not much to it, just make a regular array. You can place this code outside of any function and I suggest you do so. I put mine in the <head> of the example. Below is a sample of the code for the "Vegetables" array.

var Vegetables = new Array();
Vegetables[0] = "Carrots";
Vegetables[1] = "Celery";
Vegetables[2] = "Onions";
Vegetables[3] = "";
Vegetables[4] = "";

There are two very important things to notice here. First, look at the two empty strings I used for the last two array elements. I have a different number of items in each array, but it saves some headaches to make the arrays the same length. So I just added array objects to the shorter arrays and gave them a "blank string" value. This appears in the box blank lines at the bottom.

Secondly, notice the name I chose -- "Vegetables". This is the same as the text in the first box. I planned to use the text from the first box to pick the array to be used to populate the second box. So, named the array exactly the same as the "text" value of the first box. Note the upper case "V".

Getting The Array Name

Once you have the boxes coded and the arrays made, it's time to get to the function to generate the entries in the second box. First we need to get which first box item was selected and associate that with an array name.

Begin by reading the text of the selected option:

function makebox(){

var which_array =
document.form1.box1.options
[document.form1.box1.options.selectedIndex].text;

Say you clicked "Tree". The value returned would be "Tree", the <option>'s text. This value is a string. All of the returned values will be a string. This presents a problem.

We can't use a string to refer to an array, we must use the array's object name. It's the difference between "Tree" and Tree, and it makes all of the difference in the world. We need some way to convert the string "Tree" to the object Tree that does refer to our array.

Enter eval(). The "eval()" method will analyze a string and automatically convert it to another value. If the returned value was a digit, say "100", eval() would convert it to the number (numerical, not string value) 100. It does the same thing to objects.

To convert the <option>'s text to an array name, we need to eval() the "selectedIndex" text. Since we have the text chosen in the variable "which_array", we'd use:

eval(which_array);

This will convert the string from the "selectedIndex" text from a string to an object name -- the name of one of our arrays. We need to assign a variable to this value so we can use it later to populate the dynamic box.

var array_name = eval(which_array);

Now we can use "array_name" to refer to whichever array is appropriate for the selection in the first box. In short, there are two steps to getting the array's name. 1) Get the text (values could be used). 2) Use eval() to convert the returned string into an array name.

As an alternative, we could have used IF statements to associate the text with the array's name. First we'd put the string returned from the "selectedIndex's" text value in a variable. I'll use "which_array" for the sample below:

IF (which_array == "Vegetable"){array_name = Vegetable}
IF (which_array == "Fruit"){array_name = Fruit}
IF (which_array == "Tree"){array_name = Tree}

This form of direct assignment is generally more common because the text or value of the first box doesn't have to relate directly to the array's name. As we'll see in the next lesson, the above technique helps with error control as well.

The reason I'm using the "text" value is that I want you to get used to reading and writing a select box's text. And, I want you to understand that returned text and values are strings, and not an actual object name. I also want to introduce you to the "eval()" method. It converts strings to other values like numbers or object names.

The Loop

To populate the second box, we must loop through the chosen array and assign values to the second box's <options>s. We can assign both text and values, but our current example only assigns text for the sake of simplicity.

We begin this FOR loop by figuring out what conditions we need. We want the loop to begin with the first array item (array_name[0]). We want to to count by 1. We want this counting to continue until all of the array items have been assigned to an <option> (<array_name.length). Here's the code:

for (i = 0; i < array_name.length; i++){
code to run
}

Finally, lets write the text to our second box inside our FOR loop. The loop will write one <option> at a time by assigning text from the chosen array:

for (i = 0; i < array_name.length; i++){
document.form1.box2.options[i].text = array_name[i];
}

The above is what actually writes the text in the second select box. Notice the use of the loop's counter -- "i". It is used to both identify which <option>'s text will be written and which array item will be written in it.

Summary & Exercises

JavaScript can be used to both read and write values and text to select box <option>s. This means that we can make select boxes dynamically, or "on the fly", with JavaScript.

The values returned by reading an <option>'s value or text are returned as strings. To convert these values into object names (like array names) or numbers, we can use the eval() method. Alternatively, we can use IF statements to directly assign needed values from any given <option> text or VALUE.

Here are the steps used to make a dynamic select box:

1) Make some way to select from main options. A choice here determines what will be put in the dynamic box.

2) Make arrays that contain the text and values you want to use to populate the dynamic box. Code the HTML of the dynamic box with at least as many blank <option>s as there are elements in the longest array.

3) Code the event and function that will write values and text to the dynamic box. As a matter of style, you'll probably want to avoid using a submit button. Begin the function by reading the value or text from the selected option and then associating this with one of your arrays.

4) Use a loop to write to the box. The loop's counter should be used both to assign which <option> is written to and which array element will be put there.

For practice, try adding a main choice and array to our last example and getting it to work. Next, make a dynamic box that will show one of three different menus based on a selection made with radio buttons.

Don't worry about making these boxes overly complex or adding <option> VALUES at the present. Also, don't fret about error control. We'll be doing this in the next lesson.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index