Dropdown Menus
You are here: irt.org | Articles | JavaScript | Form | Dropdown Menus
Published on: Thursday 22nd May 1997 By: Martin Webb
Dropdown Menus
Using HTML it is very easy to create a dropdown menu, for example:
<form>
<select>
<option>
Entry 0
<option>
Entry 1
</select>
</form>
|
There is currently no way that you can adjust the colour, height or
font of form elements, but you can adjust the width by including extra
spaces:
<form>
<select>
<option>
Entry 0
<option>
Entry 1
</select>
</form>
|
Scrolling List
You can turn a selection list into a scrolling list by adding a size
property to the SELECT tag:
<form>
<select size=3>
<option>
Entry 0
<option>
Entry 1
<option>
Entry 2
<option>
Entry 3
</select>
</form>
|
Selected Option
In a selection list, by default, the first option in the list is the
selected option, unless you specify another option as the selected
option:
<form>
<select>
<option>
Entry 0
<option
selected
>
Entry 1
<option>
Entry 2
</select>
</form>
|
Submit Button
As this form stands, it cannot do anything. We need to add either
buttons or JavaScript. First buttons:
<form>
<select>
<option>
Entry 0
<option selected>
Entry 1
<option>
Entry 2
</select>
<input
type="submit"
>
<input
type="reset"
>
</form>
|
When the reset button is clicked, the default selection is reselected.
The submit button will still not do anything as no action or method is
associated with the form.
Field Values
We can also add values to the button and option elements:
<form>
<select>
<option
value="Option 0"
>
Entry 0
<option
value="Option 1"
>
Entry 1
</select>
<input
type="submit"
value="Enter"
>
<input
type="reset"
value="Clear"
>
</form>
|
Field Names
When using JavaScript to access a form, each form element should be
named to allow easy access.:
<form
name="formName1"
>
<select
name="selectName1"
>
<option
value="Option 0"
>
Entry 0
<option
value="Option 1"
>
Entry 1
</select>
<input
name="submitName1"
type="submit"
value="Enter"
>
<input
name="resetName1"
type="reset"
value="Clear"
>
</form>
|
Note, the option elements do not need to be named as they are accessed
through the options array of the form.
JavaScript Events
The JavaScript events can now be added to our simple form:
<form
name="formName2"
onSubmit="alert('submit')"
onReset="alert('reset')"
>
<select
name="selectName2"
onBlur="alert('blur')"
onFocus="alert('focus')"
onChange="alert('change')"
>
<option
value="Option 0"
>
Entry 0
<option
value="Option 1"
>
Entry 1
</select>
<input
name="submitName2"
type="submit"
value="Enter"
onBlur="alert('blur')"
onClick="alert('click')"
onFocus="alert('focus')"
>
<input
name="resetName2"
type="reset"
value="Clear"
onBlur="alert('blur')"
onClick="alert('click')"
onFocus="alert('focus')"
>
</form>
|
Note, the onReset and the button onBlur events are not supported in
Internet Explorer 3.0 (i.e. JavaScript 1.0).
The onBlur and onFocus events can quite easily be utilised for
validating form values. For the purposes of this article they will
not be discussed further.
Using JavaScript we can access the index of the currently selected
option and, if necssary, the default selection, using the following
script:
<![CDATA[ var Current = document.formName.selectName.selectedIndex;
]]>
And then the selected options value and text properties:
<![CDATA[ var currentText = document.formName.selectName.options[Current].text;
var currentValue = document.formName.selectName.options[Current].value;
]]>
onChange Event
The following simple example uses the onChange event to demonstate
some of what we have learnt so far:
<script language="JavaScript"><!--
function onChange() {
var Current =
document.formName3.selectName3.selectedIndex;
document.formName3.currentText3.value =
document.formName3.selectName3.options[Current].text;
document.formName3.currentValue3.value =
document.formName3.selectName3.options[Current].value;
}
//--></script>
<form
name="formName3"
onSubmit="return false;"
>
<select
name="selectName3"
onChange="onChange()"
>
<option
value="Option 0"
>
Entry 0
<option
value="Option 1"
>
Entry 1
</select>
<input
name="resetName3"
type="reset"
value="Clear"
>
<br><br>
Current Text:
<input
name="currentText3"
type="text"
value=""
>
Current Value:
<input
name="currentValue3"
type="text"
value=""
>
</form>
|
Note, to stop the above form actually attempting to pass data back to
the server it is necessary to return false within the forms onSubmit
and the submits onClick events.
onClick Event
The following example uses the onClick event instead:
<script language="JavaScript"><!--
function onClick() {
var Current =
document.formName4.selectName4.selectedIndex;
document.formName4.currentText4.value =
document.formName4.selectName4.options[Current].text;
document.formName4.currentValue4.value =
document.formName4.selectName4.options[Current].value;
}
//--></script>
<form
name="formName4"
onSubmit="return false;"
>
<select
name="selectName4"
>
<option
value="Option 0"
>
Entry 0
<option
value="Option 1"
>
Entry 1
</select>
<input
name="submitName4"
type="submit"
value="Enter"
onClick="onClick();return false;"
>
<input
name="resetName4"
type="reset"
value="Clear"
>
<br><br>
Current Text:
<input
name="currentText4"
type="text"
value=""
>
Current Value:
<input
name="currentValue4"
type="text"
value=""
>
</form>
|
Accessing the Selected Option
Okay, so now we can access the selected options value and text
properties lets make a useful dropdown menu:
<script language="JavaScript"><!--
function gotoURL() {
var Current =
document.formName5.selectName5.selectedIndex;
window.location.href =
document.formName5.selectName5.options[Current].value;
return false;
}
//--></script>
<form
name="formName5"
>
<select
name="selectName5"
>
<option
value="../../faq.htm"
>
Answers to some Frequently Asked Questions
<option
value="../../articles.htm"
>
Listing of articles, tutorials...
</select>
<input
name="submitName5"
type="submit"
value="Go"
onClick="return gotoURL()"
>
</form>
|
Passing a Form Reference
One trick used by experience developers is to pass a form reference to
the function:
<script language="JavaScript"><!--
function goto_URL(object) {
window.location.href =
object.options[object.selectedIndex].value;
return false;
}
//--></script>
<form
name="formName6"
>
<select
name="selectName6"
>
<option
value="../../faq.htm"
>
Answers to some Frequently Asked Questions
<option
value="../../articles.htm"
>
Listing of articles, tutorials...
</select>
<input
name="submitName6"
type="submit"
value="Go"
onClick="return goto_URL(this.form.selectName6)"
>
</form>
|
Updating the Status Bar
For the minimalists amongst you, how about the following, which also
updates the status bar text:
<form
name="formName7"
>
<select
name="selectName7"
onChange="
self.status =
formName7.selectName7.options[
formName7.selectName7.selectedIndex
].text + ' at ' +
formName7.selectName7.options[
formName7.selectName7.selectedIndex
].value"
>
<option
value="../../faq.htm"
>
Answers to some Frequently Asked Questions
<option
value="../../articles.htm"
>
Listing of articles, tutorials...
</select>
<input
name="submitName"
type="submit"
value="Go"
onClick="
window.location.href =
formName7.selectName7.options[
formName7.selectName7.selectedIndex
].value;
return false"
>
</form>
|
Image Button
Finally, an image instead of a button:
<script language="JavaScript"><!--
function go() {
window.location.href =
document.formName8.selectName8.options[
document.formName8.selectName8.selectedIndex
].value;
}
//--></script>
<form
name="formName8"
>
<select
name="selectName8"
onChange="
self.status =
formName8.selectName8.options[
formName8.selectName8.selectedIndex
].text + ' at ' +
formName8.selectName8.options[
formName8.selectName8.selectedIndex
].value"
>
<option
value="../../faq.htm"
>
Answers to some Frequently Asked Questions
<option
value="../../articles.htm"
>
Listing of articles, tutorials...
</select>
<a
href="JavaScript:go()"
>
<img
src="images/go.gif"
border="0"
width="26"
height="26"
alt="Go"
></a>
</form>
|
The following article,
Dropdown Menus #2,
describes how to use multiple select options, and how to add, remove
and replace options.
Feedback on 'Dropdown Menus'
View the profile on Martin Webb and the list of other Articles by Martin Webb.
| 