« »

This script reveals information, based on the user's selection in a drop down box. Can be used for a FAQ, contact info, and more. Short and sweet, with comments.

Label: Drop Down Info Box,

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
CSS
JavaScript
HTML
Print

Copy All x2

<style type="text/css">
#form1 {
  color: #000;
  background:#EFE3C2;
  width:200px;
  padding: 10px;
  display:none;
}

#form2 {
  color: #000;
  background:#D9EFC2;
  width:200px;
  padding: 10px;
  display:none;
}

#form3 {
  color: #000;
  background:#C2E7EF;
  width:200px;
  padding: 10px;
  display:none;
}
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<script type="text/javascript">
// Created by: Ricom Productions | http://ricom.co.uk

function selectForm(frm){
  // Select the div containing all the hidden forms
  var hiddenForms = document.getElementById("allForms");

  // Select every form within the above div and assign it to an array
  theForm = hiddenForms.getElementsByTagName("form");

  // Set the display for each of the above forms to NONE
  for(x=0; x<theForm.length; x++){
    theForm[x].style.display = "none";
  }

  // If the form selected from the list exists, set it's display to BLOCK
  if (theForm[frm-1]){
    theForm[frm-1].style.display = "block";
  }
}

</script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<form name="selector">
  <select id="someID" name="someID" onChange="selectForm(this.options[this.selectedIndex].value)">
    <option> Select a Question </option>
    <option value="1"> Question 1</option>
    <option value="2"> Question 2</option>

    <option value="3"> Question 3</option>
  </select>
</form>

<div id="allForms">
  <form id="form1">
    This is Question 1. Ma quande lingues coalesce, li grammatica del resultant lingue es plu simplic e regulari quam ti del coalescent lingues.
  </form>
  <form id="form2">
    This is Question 2. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat.
  </form>

  <form id="form3">
    This is Question 3. Epsum factorial non deposit quid pro quo hic escorol. Olypian quarrels et gorilla congolium sic ad nauseum. Souvlaki ignitus carborundum.
  </form>
</div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->