»
AnglaisFran�aisVietnamien

Imprimer - Drop Down Info Box - JavaScriptBank.com

Version compl�te: jsB@nk » Form » Dropdown » Drop Down Info Box
URL: https://www.javascriptbank.com/drop-down-info-box.html

Drop Down Info Box © JavaScriptBank.comCe scénario révèle l'information, basée sur la sélection de l'utilisateur dans une liste déroulante. Peut être utilisé pour une FAQ, informations de contact, et plus encore. Short et doux, avec des commentaires.

Version compl�te: jsB@nk » Form » Dropdown » Drop Down Info Box
URL: https://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-->