Adding Drop Down BoxesDrop down boxes for navigation
In the last section, we learned how to access the value attributes of a text box and a button. We can access the Select Box in the same way. Below is the code used for the drop down box:
<OPTION SELECTED value="jex6.htm">Page 1
<OPTION value="jex7.htm">My Cool Page
Notice that we gave the form and the select box a name. These are used later to access the value attribute of the Select box. (If you scrolled out to read all of that, you saw it got pretty messy there). We also gave the value=" " attribute to each OPTION tag. You will notice the values are urls. The url is where we want the browser to go when the user selects that option. So, for the first option, <OPTION SELECTED value="jex6.htm">Page1, we want the browser to go to "jex6.htm" when the user chooses the option "Page 1". You can change this to any url you wish.
The tricky part here is accessing the Select Box in order for a viewer to navigate the site. You see that we can get to the select box itself easily using the name attributes:
But this doen't give us access to the options inside the select box. It only gives us access to the box itself. To access the options, we must add on the options property:
Now that we can get to the options, we can access each option individually using some special notation. (The options create a numbered array, if you are familiar with arrays). You don't have to know about arrays to get the idea. Just remember that the first option listed is option 0, written as options . You see the square brackets? That is what tells us an array is being used. The second option in the list will be options. Just remember that arrays will start with 0 instead of 1, so you will have to use options to access the first option directly.
Well, now we can get to the value attribute of the first option like this:
The value would be "jex6.htm". This is nice, but if you want to be able to use the selected option each time so the viewer can go to the url of their chosen option, the script will need to know which option the user has selected. Since we can't just guess they will choose options or options, we will have to find a way to access the correct one each time the user makes a new selection. This is done by using a new property, selectedIndex.
The selectedIndex property tells the script the number of the option the user selected, so that it will not always be the same. So the script will not always be stuck on options or options, it will get the one that is selected each time.
This gives us a new problem....when we access the value of an option, we were just allowing it to be one option or another....we didn't allow it to change if another option was selected:
This would give us "jex6.htm" every time.....and we want the value to be changed when the user selects another option. So...we have to alter the value inside the array part of this already long string of words. The selectedIndex property will give us a number....the number of the option the user has selected. So, we will have to put the selectedIndex property inside the array brackets so that we end up with a number inside the brackets.....But this number changes each time a new option is selected. To access the value of the selectedIndex property, we again have to go through the name of the form and the name of the select box:
Now, to put it all together, we put the value of the selectedIndex inside the brackets of the full value of the option:
What will happen is that you will get one of the following, depeneding on which option was selected:
Well, that does it for now, try out the next section on
Drop Boxes- No Button.
||By: John Pollock||