Today is . Page created 04/05/07

Dropdown List Multi Value Drop Down List Form List


Using a drop-down menu, this script will provide different values, depending on the user's selection.

We have tested the code in IE7.0, Firefox2.0.0.3, Opera9.10, Netscape8.1.2 and AOL Explorer1.5. This script worked well in all platforms with no variations observed.

For Your Information For your Information:     Before we begin, we feel obligated to advise you that the above form is for all intensive purposes a "Stand Alone" script. In other words, it really does not do much of anything other than what you see. In order to make it function as designed, you need to incorporate it into a valid working form. If you do not have a good Solid Knowledge of HTML coding, javascripts, forms and reconfigurations, please "Do Not Attempt" this until you are Proficient in the aforementioned areas.

Depending on your knowledge of HTML and javascripts, this is an easy two (3) part copy and paste code that goes in both the <HEAD> and <BODY> sections (incorporated into a working form) of your document. It also makes use of an external .js script you need to save and upload into your directory then add a snipplet of code into the <HEAD> section to call the external.js file.

There are reconfigurations in both the external.js file and the <BODY> section of code that will be incorporated into a working form. See below where and howto.

<!------ Adding More Than The Default Three (3) Elements in The External.js File ------>

Default external.js File

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Jay Rumsey | http://www.nova.edu/~rumsey/ */
function ShowReg(op) {
document.getElementById('Car').style.display='none';
document.getElementById('Boat').style.display='none';
document.getElementById('Plane').style.display='none';

if (op == 1) {
document.getElementById('Car').style.display="block";
}
if (op == 2) {
document.getElementById('Boat').style.display="block";
}
if (op == 3) {
document.getElementById('Plane').style.display="block";
}
}

Reconfigurations - More Than Default In external.js File

/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Jay Rumsey | http://www.nova.edu/~rumsey/ */        
function ShowReg(op) {
document.getElementById('Car').style.display='none';
document.getElementById('Boat').style.display='none';
document.getElementById('Plane').style.display='none';
document.getElementById('Name').style.display='none';

if (op == 1) {
document.getElementById('Car').style.display="block";
}
if (op == 2) {
document.getElementById('Boat').style.display="block";
}
if (op == 3) {
document.getElementById('Plane').style.display="block";
}
if (op == 4) {
document.getElementById(Name').style.display="block";
}
}

As you can notice in the above external.js code how we added another element in both places. Also notice how we continued the numerical sequence. The name(s) can be anything you want to suit your needs as long as they are reflected and are the same (case sensitive -- Car is "Not" the same as car) in both places of this part of the code.

<!------ Adding More Than The Default Three (3) Option Values <BODY> Section ------>

Default <BODY> Section

<select id="choice" onChange="ShowReg(this.selectedIndex)">
<option value='0'>Select registration type
<option value="1">Car
<option value="2">Boat
<option value="3">Plane
</select>
<br>
<div id="Car" style="display:none">
VIN No.. <input type="text" id="VIN" value="">
</div>
<div id="Boat" style="display:none">
Registration No. <input type="text" id="Breg" value="">
</div>
<div id="Plane" style="display:none">
Tail No. <input type="text" id="Ptail" value="">
Model <input type="text" id="Pmodel" value="">
</div>

Reconfigured <BODY> Section - More Than Default

<select id="choice" onChange="ShowReg(this.selectedIndex)">
<option value='0'>Select registration type
<option value="1">Car
<option value="2">Boat
<option value="3">Plane
<option value="4">Name
</select>
<br>
<div id="Car" style="display:none">
VIN No.. <input type="text" id="VIN" value="">
</div>
<div id="Boat" style="display:none">
Registration No. <input type="text" id="Breg" value="">
</div>
<div id="Plane" style="display:none">
Tail No. <input type="text" id="Ptail" value="">
Model <input type="text" id="Pmodel" value="">
</div>
<div id="Name" style="display:none">
Name <input type="text" id="Nname" value="">
Rank Upon Separation <input type="text" id="Nrank" value=""><br>
Serial No. <input type="text" id="Nserialnumber" value="">
Date of Induction <input type="text" id="Nretire" value=""><br>
Date of Retirement <input type="text" id="Nretire" value="">
MOS <input type="text" id="NMOS" value="">
</div>

As you can notice in the above <BODY> section of code how we added another option value in both places. Also notice how we continued the numerical sequence. The name(s) can be anything you want to suit your needs as long as they are reflected and are the same (case sensitive -- Car is "Not" the same as car) in both places of this part of the code as well as in the external.js file. All sections must be the same to reflect upon each other.

Warning Logo     Note Of Importance:     If you are not sure of howto make the external .js file and make use of it within your document, grab the below link and it is fully explained.
[ .js File Howto ]

For Your Information For your Information:     If you are not comfortable or prefer not to use the external.js file, you can use the traditional cut/copy and paste instead of the external .js file. If you need a little refresher on what is required to achieve this, grab the below link and it is fully explained.
[ Traditional Cut/Copy and Paste ]

Depending on which of the above methods you have selected (external.js file or Traditional Copy/Cut & Paste), you will add either the snipplet of code (after you have uploaded the external.js file) into the <HEAD> section or the completed section of code that you added the opening and closing script tags.

Snipplet Of Code

<script type="text/javascript" src="multiValue.js">
</script>
Traditional Copy/Cut and Paste

<SCRIPT LANGUAGE="JavaScript">

<HEAD> Section of code goes here

//  End -->
</script>
Arrow External .js file



Arrow Traditional Copy/Cut & Paste Code with opening & closing tags that you had to add into the <HEAD> section of code that was originally earmarked to be an external .js file.

If you would like to see an example of this effect using the "Traditional Cut/Copy & Paste" method, grab the below link and you are there. Examine our "Source" code (on the page you will be opening) to see how we had to reconfigure it to make it work. We have it very well documented for your convenience.
[ Traditional Cut/Copy & Paste Method ]

O nce you have completed either of the above steps for the <HEAD> section, (including the reconfigurations in both <HEAD> and <BODY> sections) all that is left is to incorporate the <BODY> section of code into a valid form.

On A Final Note     If you have noticed in our example that nothing moves below the effect to make room for any material that appears depending on which selection you make. All we did to stop things from jumping around was to surround the <BODY> section of the code with a height defined table. The height will vary according to what option values you have for each selection. This you can play around with until it works for your form. See below for where and howto.

<table border="0"cellpadding="4" cellspacing="3">
<tr>

<td valign="top" align="left"height="?">

<BODY> Section Of Code Goes Here!

</td></tr>
</table>

We hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]   [ Rate This Page ]