Dropdown Menus #2
You are here: irt.org | Articles | JavaScript | Form | Dropdown Menus #2
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>
|
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>
|
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>
|
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.
Feedback on 'Dropdown Menus #2'
View the profile on Martin Webb and the list of other Articles by Martin Webb.
| 