Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org

Related items

Form Image Button Fields

Creating 'Encoded' Name & Value Pairs

Disabling form elements

Passing data from one form to another

Addressing Form Field Validation with Regular Expressions and JavaScript 1.2

Dynamic Dropdown Menus

Form Tricks

Dropdown Menus #3

Check Boxes and Radio Buttons

Dropdown Menus

Dropdown Menus #2

You are here: irt.org | Articles | JavaScript | Form | Dropdown Menus #2 [ previous next ]

Published on: Monday 26th May 1997 By: Martin Webb

Dropdown Menus #2

This article starts from where the previous article Dropdown Menus left of.

Multiple Select Entries

By adding the simple MULTIPLE attribute to a selection list, the selection list will now allow multiple selections using the shift and control keys:

<FORM>
<SELECT MULTIPLE>
<OPTION>Entry 0
<OPTION>Entry 1
<OPTION>Entry 2
<OPTION>Entry 3
<OPTION>Entry 4
<OPTION>Entry 5
</SELECT>
</FORM>


Reading Multiple Selected Entries

The following simple example accesses the multiple options that may have been selected:

<SCRIPT LANGUAGE="JavaScript">
<!--
function onClick(object) {
    for (var Current=0;Current < object.selectName.options.length;Current++) {
        var text = eval('object.currentText' + Current);
        var value = eval('object.currentValue' + Current);
        if (object.selectName.options[Current].selected) {
            text.value = object.selectName.options[Current].text;
            value.value = object.selectName.options[Current].value;
        }
        else {
            text.value = '';
            value.value = '';
        }
    }
}
//-->
</SCRIPT>

<FORM NAME="formName1" onSubmit="return false;">
<SELECT NAME="selectName" MULTIPLE>
<OPTION VALUE="Option 0">Entry 0
<OPTION VALUE="Option 1">Entry 1
<OPTION VALUE="Option 2">Entry 2
<OPTION VALUE="Option 3">Entry 3
<OPTION VALUE="Option 4">Entry 4
<OPTION VALUE="Option 5">Entry 5
</SELECT>
<INPUT TYPE="SUBMIT" VALUE="Enter" onClick="onClick(this.form);return false;">
<INPUT  TYPE="RESET" VALUE="Clear">
<P>Select items from the above menu, then press enter.
The following boxes will display your choices:
<P>
Text 0: <INPUT NAME="currentText0" TYPE="TEXT" VALUE="">
Value 0: <INPUT NAME="currentValue0" TYPE="TEXT" VALUE=""><BR>
Text 1: <INPUT NAME="currentText1" TYPE="TEXT" VALUE="">
Value 1: <INPUT NAME="currentValue1" TYPE="TEXT" VALUE=""><BR>
Text 2: <INPUT NAME="currentText2" TYPE="TEXT" VALUE="">
Value 2: <INPUT NAME="currentValue2" TYPE="TEXT" VALUE=""><BR>
Text 3: <INPUT NAME="currentText3" TYPE="TEXT" VALUE="">
Value 3: <INPUT NAME="currentValue3" TYPE="TEXT" VALUE=""><BR>
Text 4: <INPUT NAME="currentText4" TYPE="TEXT" VALUE="">
Value 4: <INPUT NAME="currentValue4" TYPE="TEXT" VALUE=""><BR>
Text 5: <INPUT NAME="currentText5" TYPE="TEXT" VALUE="">
Value 5: <INPUT NAME="currentValue5" TYPE="TEXT" VALUE=""><BR>
</FORM>

Select items from the above menu, then press enter. The following boxes will display your choices:

Text 0: Value 0:
Text 1: Value 1:
Text 2: Value 2:
Text 3: Value 3:
Text 4: Value 4:
Text 5: Value 5:

Loading Multiple Frames on Selection

We can demonstrate one possible practical use of the last example, with the following code which loads a frameset with the required locations, if more than one option is selected, or, if just one option is selected then that location is loaded into the current document:

<SCRIPT LANGUAGE="JavaScript">
<!--
function validate(object) {
    var atLeastOneSelected = false;
    var numberOfSelected = 0;
    var seletedOption = 0;
    for (var Current=0;Current < object.selectName.options.length;Current++) {
        if (object.selectName.options[Current].selected) {
            atLeastOneSelected = true;
            numberOfSelected += 1;
            selectedOption = Current;
        }
    }
    
    if (!atLeastOneSelected) alert('At least one option from the menu must be selected.');

    if (numberOfSelected == 1) {
        window.location.href = object.selectName.options[selectedOption].value;
        return false;
    }

    return atLeastOneSelected;
}
//-->
</SCRIPT>

<FORM NAME="formName2" METHOD="GET" ACTION="test.htm">
<SELECT NAME="selectName" MULTIPLE>
<OPTION VALUE="test1.htm">location 1
<OPTION VALUE="test2.htm">location 2
<OPTION VALUE="test3.htm">location 3
<OPTION VALUE="test4.htm">location 4
<OPTION VALUE="test5.htm">location 5
<OPTION VALUE="test6.htm">location 6
</SELECT>
<INPUT TYPE="SUBMIT" VALUE="Enter" onClick="return validate(this.form)">
<P>Select items from the above menu, then press enter.
</FORM>

The source code for the test.htm file would then need to interrogate the search property of the current location:

<SCRIPT LANGUAGE="JavaScript">
<!--
var searchString = self.location.search;
var numberOfParameters = 0;
var myLink = new Array();

while (searchString.indexOf('=')) {
    var pos = searchString.indexOf('=');
    var end = searchString.indexOf('&');
    if (end == -1)
        end = searchString.length;
    myLink[numberOfParameters++] = searchString.substring(pos+1,end);
    searchString = searchString.substring(end+1,searchString.length);
}

var height = Math.floor(100/numberOfParameters);

document.write('<FRAMESET FRAMEBORDER=0 ROWS="');

for (Current = 1; Current<numberOfParameters+1; Current++) {
    if (Current != numberOfParameters)
        document.write(height+'%,');
    else
        document.write('*">');
}

for (Current = 0; Current<numberOfParameters; Current++)
   document.write('<FRAME SRC="'+myLink[Current]+'">');

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

Select items from the above menu, then press enter.

Note, this will not work offline using Microsoft Internet Explorer, i.e. whilst the protocol is file:.


Amending Options

The following example, shows how to add, replace or delete an option.

Note, this will not work with Internet Explorer 3.x.

<SCRIPT LANGUAGE="JavaScript">
<!--
function onChange(object) {
    var Current = object.selectName.selectedIndex;
    object.currentText.value = object.selectName.options[Current].text;
    object.currentValue.value = object.selectName.options[Current].value;
}

function deleteOption(object) {
    var Current = object.selectName.selectedIndex;
    object.selectName.options[Current] = null;
}

function addOption(object) {
    var defaultSelected = true;
    var selected = true;
    var optionName = new Option(object.currentText.value, object.currentValue.value, defaultSelected, selected)
    var length = object.selectName.length;
    object.selectName.options[length] = optionName;
}

function replaceOption(object) {
    var Current = object.selectName.selectedIndex;
    object.selectName.options[Current].text = object.currentText.value;
    object.selectName.options[Current].value = object.currentText.value;
}
//-->
</SCRIPT>

<FORM NAME="formName3" onSubmit="return false;">
<SELECT NAME="selectName" onChange="onChange(this.form)">
<OPTION VALUE="Option 0" SELECTED>Entry 0
<OPTION VALUE="Option 1">Entry 1
<OPTION VALUE="Option 2">Entry 2
<OPTION VALUE="Option 3">Entry 3
<OPTION VALUE="Option 4">Entry 4
<OPTION VALUE="Option 5">Entry 5
</SELECT>
<P>
Text: <INPUT NAME="currentText" TYPE="TEXT" VALUE="">
Value: <INPUT NAME="currentValue" TYPE="TEXT" VALUE="">
<P>
<INPUT TYPE="BUTTON" VALUE="Delete"  onClick="deleteOption(this.form)">
<INPUT TYPE="BUTTON" VALUE="Add"     onClick="addOption(this.form)">
<INPUT TYPE="BUTTON" VALUE="Replace" onClick="replaceOption(this.form)">
</FORM>

<SCRIPT LANGUAGE="JavaScript">
<!--
onChange(document.formName2);
//-->
</SCRIPT>

Text: Value:

Thanks to Martin Honnen for the tip about using history.go(0) to refresh the page after amending a drop down box.

Note, Microsoft Internet Explorer 3.x does not currently support the addition and deletion of options.

Related items

Form Image Button Fields

Creating 'Encoded' Name & Value Pairs

Disabling form elements

Passing data from one form to another

Addressing Form Field Validation with Regular Expressions and JavaScript 1.2

Dynamic Dropdown Menus

Form Tricks

Dropdown Menus #3

Check Boxes and Radio Buttons

Dropdown Menus

©2016 Martin Webb