Dropdown Menus #3

You are here: irt.org | Articles | JavaScript | Form | Dropdown Menus #3

Published on: Sunday 13th July 1997 By: Martin Webb

Introduction
Adding an Additional Entry
Searching and Highlighting an Entry

Introduction

This article covers some advanced uses of dropdown menus: adding an additional entry passed from another page, and locating an entry based on a value entered in a text field.

Unlike the previous article of dropdown menus (Dropdown Menus #2) which described how to alter a dropdown menu once it had been created, this method describes how to alter the dropdown menu as it is being created.

Adding an Additional Entry

First we need a trigger for the loading of the page, which should at the same time pass the entry value to be added to the dropdown menu:

<FORM>Enter a new country:
<P><INPUT NAME="country" TYPE="TEXT" VALUE="">
<INPUT TYPE="BUTTON" VALUE="Go"
    onClick="window.location.href = 'country.htm' + '?' + this.form.country.value;return false">
</FORM>

Then in the country.htm file we need to strip off the parameter passed using the search property:

In this first example, a dummy entry is created in the dropdown menu, which is then changed using the contents of the location search property. It utilises the SELECTED attribute to ensure that the selection is shown by default.

However this example does have side effects, e.g. if a country is not passed then the first entry will always remain empty, and in JavaScript 1.0, i.e. Netscape 2.x and Internet Explorer 3.x, the method of updating the option text is not supported.

<FORM NAME="formName1">
<SELECT NAME="selectName1">
<OPTION  VALUE="x" SELECTED>xxxxxxxxxxx
<OPTION  VALUE="0">Argentina
<OPTION  VALUE="1">Australia
<OPTION  VALUE="2">Austria
<OPTION  VALUE="3">Belgium

<!-- ... and so on  ... -->

<OPTION VALUE="58">Switzerland
<OPTION VALUE="59">Taiwan
<OPTION VALUE="60">Thailand
<OPTION VALUE="61">Turkey
<OPTION VALUE="63">United States
<OPTION VALUE="64">Uruguay
<OPTION VALUE="65">Venezuela
<OPTION VALUE="66">Yugoslavia
</SELECT>
</FORM>

<SCRIPT LANGUAGE="JavaScript1.1"><!--
document.formName1.selectName1.options[0].text = location.search.substring(1);
//--></SCRIPT>

This second example, actually populates the dummy entry with the contents of the location search property as its being created. It first checks to see if the search property contains a value, and then only outputs the entry if it has.

The problem with the last two examples, is that it doesn't check if the country passed is already in the list, and the country passed is always placed in the same position.

<FORM NAME="formName2">
<SELECT NAME="selectName2">

<SCRIPT LANGUAGE="JavaScript"><!--
if (location.search.length > 1)
    document.write('<OPTION VALUE="x" SELECTED>' + location.search.substring(1));
//--></SCRIPT>

<OPTION  VALUE="0">Argentina
<OPTION  VALUE="1">Australia
<OPTION  VALUE="2">Austria
<OPTION  VALUE="3">Belgium

<!-- ... and so on  ... -->

<OPTION VALUE="58">Switzerland
<OPTION VALUE="59">Taiwan
<OPTION VALUE="60">Thailand
<OPTION VALUE="61">Turkey
<OPTION VALUE="63">United States
<OPTION VALUE="64">Uruguay
<OPTION VALUE="65">Venezuela
<OPTION VALUE="66">Yugoslavia
</SELECT>
</FORM>

The third example, which is 100% pure JavaScript, first creates an array of countries, and then sweeps the array to create the dropdown menu, whilst at the same time comparing the countries with the contents of the search property.

If no country is passed then it assumes a default country of United States.

Depending on whether it has found a match, or found the correct alphabetic position within the list, it outputs the country passed to the list. The SELECTED attribute is only output when either the country is added or already present.

It uses a flag addedToList, which when set to true, stops any further comparisons being performed.

<SCRIPT LANGUAGE="JavaScript"><!--
var countryArray = new Array();
index=0;
countryArray[index++] = 'Argentina';
countryArray[index++] = 'Australia';
countryArray[index++] = 'Austria';
countryArray[index++] = 'Belgium';

/* ... and so on  ... */

countryArray[index++] = 'Switzerland';
countryArray[index++] = 'Taiwan';
countryArray[index++] = 'Thailand';
countryArray[index++] = 'Turkey';
countryArray[index++] = 'United States';
countryArray[index++] = 'Uruguay';
countryArray[index++] = 'Venezuela';
countryArray[index++] = 'Yugoslavia';

if (location.search.length > 1)
    var passedCountry = location.search.substring(1);
else
    var passedCountry = 'United States';

var addedToList = false;

document.write('<FORM NAME="formName3"><SELECT NAME="selectName3">');

for (var i=0; i < index; i++) {
    if (addedToList) {
        document.write('<OPTION VALUE="' + i + '">' + countryArray[i]);
    }
    else if (passedCountry.toUpperCase() == countryArray[i]toUpperCase()) {
        document.write('<OPTION VALUE="' + i + '" SELECTED>' + passedCountry);
        addedToList = true;
    }
    else if (passedCountrytoUpperCase() < countryArray[i]toUpperCase()) {
        document.write('<OPTION VALUE="x" SELECTED>' + passedCountry);
        addedToList = true;
    }
    else {
        document.write('<OPTION VALUE="' + i + '">' + countryArray[i]);
    }
}

document.write('<\/SELECT><\/FORM>');
//--></SCRIPT>

Why not try out all three examples at once:

Searching and Highlighting an Entry

As you can see from the last example, we are not that far away already from being able to search a dropdown list.

You may already be aware that if a dropdown menu is selected, i.e. it has the current focus, then if you press a key on the keyboard, e.g. the letter 'A', then the dropdown menu will jump to the first entry starting with that letter.

This example will show how to type in a value in a text field, which will then be located in a dropdown menu.

First of all we define the form, including events to trigger the searching of the table, i.e. onSubmit, onChange, and onClick. To avoid the onSubmit event within the FORM tag from submitting the form we use return false.

Each of the search() function calls passes a reference to the current form, using this.form. However, when used in the FORM tag, this does not work, therefore we need to use document.countryForm.

<FORM NAME="countryForm" onSubmit="search(document.countryForm);return false">
<SELECT NAME="countrySelect">
<OPTION  VALUE="0">Argentina
<OPTION  VALUE="1">Australia
<OPTION  VALUE="2">Austria
<OPTION  VALUE="3">Belgium

<!-- ... and so on  ... -->

<OPTION VALUE="58">Switzerland
<OPTION VALUE="59">Taiwan
<OPTION VALUE="60">Thailand
<OPTION VALUE="61">Turkey
<OPTION VALUE="63">United States
<OPTION VALUE="64">Uruguay
<OPTION VALUE="65">Venezuela
<OPTION VALUE="66">Yugoslavia
</SELECT>

<INPUT NAME="countryText" TYPE="TEXT" SIZE="10" VALUE="" onChange="search(this.form)">
<INPUT TYPE="BUTTON" VALUE="Search" onClick="search(this.form)">

</FORM>

<SCRIPT LANGUAGE="JavaScript"><!--
function search(object) {

    var found = false;
    var country = object.countryText.value.toUpperCase();

    if (object.countryText.value.length > -1) {

        for (var i=0; (i < object.countrySelect.length) && !found; i++) {

            var text = object.countrySelect.options[i].text;
            countrySelect = text.toUpperCase();

            if (countrySelect.indexOf(country) == 0) {

                found = true;
                object.countrySelect.options[i].selected = true;
            }
            else if (countrySelect > country) {

                found = true;
                object.countrySelect.options[i].selected = true;
            }
        }

        if (!found)
                object.countrySelect.options[object.countrySelect.length - 1].selected = true;
    }
}
//--></SCRIPT>

<SCRIPT LANGUAGE="JavaScript1.1"><!--
function search(object) {

    var found = false;

    if (object.countryText.value.length > -1) {

        for (var i=0; (i < object.countrySelect.length) && !found; i++) {

            if (object.countrySelect.options[i].text.toUpperCase().indexOf(object.countryText.value.toUpperCase()) == 0) {

                found = true;
                object.countrySelect.options[i].selected = true;
            }
            else if (object.countrySelect.options[i].text.toUpperCase() > object.countryText.value.toUpperCase()) {

                found = true;
                object.countrySelect.options[i].selected = true;
            }
        }

        if (!found)
                object.countrySelect.options[object.countrySelect.length - 1].selected = true;
    }
}
//--></SCRIPT>

<P><A HREF="index.htm">Return</A>

</BODY>
</HTML>

Note, there are two different definitions of the search() function, one for JavaScript1.1 and another for JavaScript, i.e. JavaScript 1.0. The JavaScript 1.1 version uses object notation to the fullest. This will fail when used in JavaScript 1.0 therefore it has been broken down into discrete steps.

Each versions uses the toUpperCase() method before comparing the value of the search field with the text value of each option. It uses the indexOf() method to find instances where the the value to be searched for appears at the start of any of the options. It uses a found to halt execution when the entry has been found, and sets the currently examined option as selected

It also checks if the alphabetical position within the menu has been surpassed and sets the nearest match as selected. If the entry is not found, i.e. !found then it sets the last entry in the menu as selected.

Working Example

Why not try out this example?

One feature that would be nice to code, is a dynamic search facility, i.e. where as you type the search string in, it searches for the nearest match. This may be possible in JavaScript 1.2 with the use of the onKeyDown, onKeyPress and onKeyUp events.

Feedback on 'Dropdown Menus #3'

Dropdown Menus #3 - Phillip Anderson 20:59:24 12/02/00
Dropdown Menus #3 - Alan Williams 08:57:06 3/05/00
Dropdown Menus #3 - xyred 15:35:05 7/30/99

View the profile on Martin Webb and the list of other Articles by Martin Webb.

What's New

How to do the impossible with Google Gears

Out and About

Last Updated: 21st December 2007. Maintained by: Martin Webb
irt.org liability, trademark, document use, privacy statement and software licensing rules apply.