| home / programming / professional / chap6/ 1 |   [previous] |
|
|
|
JavaScript has made select boxes into powerful navigation tools. At its simplest, you give your users some navigational options in a select box. When the user selects an option, you immediately send them to the correct page.
Creating such an effect is very easy. Put the destination of the option in its value attribute. Then add an onchange event handler, which will be executed when the user selects a new option.
<form>
<select onchange="goTo(this)">
<option>Select your destination</option>
<option value="page1.html">Page 1</option>
<option value="page2.html">Page 2</option>
<option value="page3.html">Page 3</option>
</select>
</form>
Within the goto() function, obj is a reference to the select box. The function first reads out the value of the selected option, and then checks if there is any destination. If the user inadvertently selects the ornamental option Select your destination, which has no value, nothing should happen. If there is a destination, load the new page.
function goTo(obj)
{
var destination = obj.options[obj.selectedIndex].value;
if (destination)
{
location.href = destination;
}
}
Of course, some users have JavaScript disabled and cannot use this type of navigation. Make sure that there is another, non-JavaScript way of navigating to these pages, like a list of hyperlinks.
A more interesting application is a context-sensitive navigation. In this example the user states their preferences by checking a select box. A script then kicks in that removes all options from the select box and writes new options to it.
First, we need to discuss the syntax for adding and removing options. As we saw before, each select object has an options[] array object property, which contains all options. To remove an option from this array, simply make it null:
document.forms['firstform'].elements['testselect'].options[1] = null;
To add an option to the select box, create a new Option object and assign it to the correct option in the array. The argument text is the text seen by the user, and value is the value of the new option.
var newOpt = new Option('text','value');
document.forms['firstform'].elements['testselect'].options[1] = newOpt;
There's one important catch, though. As soon as you add or remove an option, the index numbering of the other options changes immediately. At the moment, options[1] accesses the second option, say Page 1. When you remove this option, Page 1 is removed and options[1] now refers to Page 2, which has become the second option. When you add a new option in options[1], Page 2 moves back to options[2].
Fortunately to remove all options, you just have to make the length of the options array 0:
var x = document.forms['firstform'].elements['testselect'].options
x.length=0
Browser compatibility notes:
If you add or remove options to a select, this select must have a size
attribute larger than 1, or Netscape and IE each develop their own bugs.
Netscape 4 and its predecessors can't resize a select box: it always keeps its
initial width. Therefore you should make the initial value long enough to stretch
the select box to hold the longest text you wish to insert.
So, let's write the script to change options. First of all, here's the HTML:
<form name="myform">
<select size="2" onChange="goTo(this)" name="navigation">
<option>State your preferences</option>
</select>
<br /><br />
<input type="radio" name="prefs" value="monkeys"
onclick="repopulate(this)"
/>Monkeys
<input type="radio" name="prefs" value="cows"
onclick="repopulate(this)"
/>Cows
<input type="radio" name="prefs" value="blue_whales"
onclick="repopulate(this)"
/>Blue whales
</form>
Now for the script. We create some data arrays containing the new options, making sure the name of the arrays correspond to the value of the radiobuttons. We then put all the arrays in an object called data. Note that the arrays hold text/value pairs for each option: first the text the user sees, and then the page it leads to.
var data = new Object();
data['monkeys'] = new Array(
'Chimps','chimps.html',
'Gorillas','gorillas.html');
data['cows'] = new Array(
'One cow','cow.html',
'Tucows','http://www.tucows.com');
data['blue_whales'] = new Array(
'Blue whales in the sea','sea.html',
'Blue whales elsewhere','elsewhere.html');
When the user clicks on a radiobutton, the function repopulate() is called. This function repopulates the select box with the correct options. We start by removing the current options by setting the length of the options array to 0:
function repopulate(obj)
{
var select = document.forms['myform'].elements['navigation'];
select.options.length = 0;
Now we take the array with the same name as the value of the radiobutton. We iterate through the array, increasing the array index by 2 each time, since each option consists of two elements: text and value. For each text/value pair we create one new option with the correct text and value. Finally, we insert this new option at the end of the select box.
var newOptions = data[obj.value];
for (var i=0;i<newOptions.length;i+=2)
{
var newOpt = new Option(newOptions[i],newOptions[i+1]);
select.options[select.options.length] = newOpt;
}
}
Finally, remember to add the goTo() function we created in the earlier select box example, so that the user moves to one of the option pages on clicking on an option.
| home / programming / professional / chap6/ 1 | [previous] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: March 11, 2003
Revised: March 11, 2003
URL: http://webreference.com/programming/professional/chap6/1
