Overview

Since we can read and assign values and text to select box <option>s with JavaScript, we can use JavaScript to make a dynamic menu that changes with JavaScript events. In short, the menu can write itself.

Here's an example of such a menu. Note that the drop down menu changes depending on which radio button is clicked. The menu is functional and gives a description of the medical procedure in the textarea at the bottom. JavaScript writes both the "Male" and "Female" menus dynamically.

This is done by putting the <option> text tags and "values" in arrays. When a radio button is clicked, two arrays are chosen -- one with text labels and another with values. A loop is then used to assign the text and values to the drop down menu.

When a menu selection is made, the value of the textarea is set with the appropriate description. It's not that complex. It's just a collection of little things we've already learned.

One problem that comes up is how to clear one menu before another is written. I solve this problem by using a "clearing loop" that sets all of the text tags and values to null ("").

Making The Form

Begin this project by making a form with two radio buttons, a set of <select> tags, and a textarea. Don't code in the <option> tags just yet. You can use as many radio buttons as you'd like, but two's enough for now.

Remember that after you learn how to make these dynamic menus, you can use any number of events, properties, or form data to populate the menu.

The Arrays

Next make the arrays you need. In our example I needed four arrays. One holds the text tags for the "Male" menu and a second holds the "values", which are the descriptions. I called these arrays "male" and "male_descriptions".

Two more menus are made for the "Female" menu. One holds text tags and the other the values that will be assigned to the <option>s if the "Female" button is clicked. These two arrays are called "female" and "female_descriptions".

Code your <option> tags. Don't add any "value", just code in plain <option> tags. Add as many <option> tags as there are elements in the longest array. In our case that would be 5 plain <option> tags. (The "female" and "female_descriptions" are the longest arrays each holding 5 elements.)

Initial Event & Function

Now we're ready to start coding the dynamic part of our menu. I've used the "onClick" event coded into each radio button to get the ball rolling. The "Male" button code is shown below.

<input type="radio" name="gender" value="male" onClick="loadbox2()">Male<br>

Notice that I called the function to dynamically generate the drop down menu "loadbox2()". This same function is called by the "Female" radio button as well. The "Female" button's VALUE is "female".

Once clicked, the buttons run "loadbox2()" that determines which button was selected with the following code:

function loadbox2(){
//begins radio search

for (counter=0; counter < 2; counter++){
if (document.form1.gender[counter].checked == true){
var choice = document.form1.gender[counter].value;
}//ends IF
}//ends for

if (choice =="female"){
array1 = female;
array2 = female_descriptions;
}//ends first (female) IF

if (choice == "male"){
array1 = male;
array2 = male_descriptions;
}//ends second (male) IF
}//ends function loadbox2

The program first checks to see which box is checked and puts that box's value in the variable "choice". Next it uses IFs to assign the proper arrays to the variables "array1" and "array2". These variables will be used to generate the menu.

Had we clicked the "Male" box, the "male" and "male_descriptions" arrays would be selected and assigned to "array1" and "array2" respectively.

The Menu Loop

Now that we've got the proper arrays assigned to "array1" and "array2", we can make the menu. It couldn't be simpler:

var box2 = document.form1.procedures.options;

for (i = 0; i < array1.length; i++){
box2[i + 2].text = array1[i];
box2[i + 2].value = array2[i];
}// ends populating FOR

This is put after the previous code in the "loadbox2()" function. Both arrays will have the same length because of the way we coded them. Each tag from the "male" array (array1) is paired with a description from the "male_description" array (array2). So we can use the length of either array to control the FOR loop.

Notice that I made a variable called "box2" to hold the object "document.form1.procedures.options". This is to save long lines and error-prone typing in the actual loop. The variable "box2" now represents the drop down box's options.

After the FORs conditions, I coded in the two lines that actually produce the working menu. The first, "box2[option_number].text" assigns the text tag to an <option> from the appropriate array. The second line assigns VALUEs.

Don't get thrown off by the "[i+2]". Notice in the example that the first two <option>s are a title ("-- Procedures --") and a blank line. I want the dynamic options to begin on the third line so the <option> number will be two more than the FOR's counter. The arrays, however, begin their count at zero and follow the FOR's counter as it increments.

The Menu Function

Voila! You've made a dynamic menu. To get it working you'll need to code an event that will load the descriptions in the textarea. We've already got the descriptions in "array2" and loaded into the <option> tags just like the visible text.

I used an "onChange" event to trigger the description display. It's placed in the <select> tag.

<select name="procedures" onChange="explain()">

The function I called "explain()" will be run when a selection is made in the <select> menu. This is a very simple function.

function explain(){
document.form1.description.value = "";

var parent_object = document.form1.procedures.options;

var selection = parent_object[parent_object.selectedIndex].value;

document.form1.description.value = selection;
}// ends explain function

Remember that this is an entirely separate function from the "loadbox2()" function that makes our dynamic drop down menu. It uses a standard "selectedIndex" scheme to determine the "value" of the selected <option> and then writes it to the textarea. (Note: The textarea's NAME is "description".)

Clearing

If you play around with this a while, you'll notice that some of the "Female" options hang around even after the "Male" button is clicked. This is because when the "Male" button populates the menu, it has one less option than the "Female" menu. To take care of this, we can clear all of the values and text tags from the <options> before writing a new menu.

At the beginning of our "loadbox2()" function put:

//clearing loop
for (i = 2; i < document.form1.procedures.options.length; i++){
box2[i].text = "";
box2[i].value = "";
}//ends clearing FOR loop

This code merely assigns a value of nothing, null, "", zip, to each <option>'s text tag and value. It's placed at the very start of the "loadbox2()" function. As a rule, clearing loops and routines are placed before the programming that populates the boxes. Starting off with a clean slate, so to speak.

The textarea holding the descriptions is cleared with:

function explain(){
document.form1.description.value = "";

Notice that this code is put at the start of the "explain()" function that populates the textarea. You can move these clearing lines around, but keep in mind that you should clear first, then populate.

Using JavaScript To Write <option>s

One more thing before I end this lesson. You can use JavaScript to write the actual <option> tags, too. If you had arrays with a hundred options this would be a real lifesaver. Keep in mind that you need as many options as there are elements in the longest array along with any blank, title, and formatting <option> tags you may be using.

Here's the simple script I used to write out the number of plain <option> tags I needed. I know that the "female" array is my longest array:

<select name="procedures" onChange="explain()">
<option>-- Procedures --
<option>

<script language="JavaScript">
for (count=0; count < female.length; count++){
document.write("<option>");}
</script>
<option>
</select>

The above JavaScript is just a loop that writes "<option>" as many times as needed. In our case, that's as many as are in the "female" array. Also note that I put the title and blank <option> outside the loop. This saves me having to add a text tag "-- Procedures --" each time and throwing the arrays off.

Summary & Exercises

JavaScript can dynamically generate a <select> box drop down menu. This requires making arrays for the text tags and values to be used. There must be some method to determine which menu (arrays) to use. There must also be events triggering the population of the dynamically generated menu.

The menu itself can be populated with both text tags and values making it fully functional. Try making our example from scratch several times. Then make a drop down box that holds URLs to search engines or web tutorials based on a viewer's selection.

To Next Advanced JavaScript Lesson

Back To Advanced JavaScript Index