»
EnglishFrenchVietnamese

Print - Drop Down Info Box - JavaScriptBank.com

Full version: jsB@nk » Form » Dropdown » Drop Down Info Box
URL: http://www.javascriptbank.com/drop-down-info-box.html

Drop Down Info Box © JavaScriptBank.comThis 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.

Full version: jsB@nk » Form » Dropdown » Drop Down Info Box
URL: http://www.javascriptbank.com/drop-down-info-box.html



CSS
<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-->


JavaScript
<script type="text/javascript">// Created by: Ricom Productions | http://ricom.co.ukfunction 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-->


HTML
<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-->