...

View Full Version : pull down menu



flouriet
10-16-2008, 04:29 PM
how do i create a doc allowing the user to select his/her birth month from a pull-down list and from that display some type of output that would allow me to display the birthstone and meaning of it. this is all i have so far
for example i want someone to be able to select may and get the out put of the word peral and it's meaning such as peace


<html>
<title>Pull-Down List</title>
</head>
<body>
Select your birth month:
<select name="birthstone">
<option value="jan" selected>January</option>
<option value="feb">February</option>
<option value="mar">March</option>
<option value="april">April</option>
<option value="may">May</option>
<option value="june">June</option>
<option value="july">July</option>
<option value="aug">August</option>
<option value="sep">September</option>
<option value="oct">October</option>
<option value="nov">November</option>
<option value="dec">December</option>
</select>

</body>
</html>

Philip M
10-16-2008, 06:32 PM
This may help you:-

http://www.codingforums.com/showthread.php?t=137818


Quizmaster: What was the date of the Battle of Hastings?
Contestant: Was it 1974?

flouriet
10-17-2008, 04:19 PM
thank you it helped alot

jmrker
10-18-2008, 05:57 AM
Another version (just playing around): :)


<html>
<title>Pull-Down List</title>
<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=150326
function Show(info) {
document.getElementById('Birthstone').innerHTML = info;
}
</script>
</head>
<body>
Select your birth month:
<select name="birthstone">
<option value="" onclick="Show(this.value)"></option>
<option value="Garnet or Rose Quartz" onclick="Show(this.value)">January</option>
<option value="Amethyst or Onyn" onclick="Show(this.value)">February</option>
<option value="Aquamarine or Bloodstone" onclick="Show(this.value)">March</option>
<option value="Diamond or Quartz" onclick="Show(this.value)">April</option>
<option value="Emerald or Chrysoprase" onclick="Show(this.value)">May</option>
<option value="Alexandrite or Monstone or Pearl" onclick="Show(this.value)">June</option>
<option value="Ruby or Carnelion" onclick="Show(this.value)">July</option>
<option value="Peridot or Sardonyx" onclick="Show(this.value)">August</option>
<option value="Sapphire or Lapis" onclick="Show(this.value)">September</option>
<option value="Opal or Tourmaline" onclick="Show(this.value)">October</option>
<option value="Topaz or Citrine" onclick="Show(this.value)">November</option>
<option value="Tanzanite or Zircon or Tourquoise" onclick="Show(this.value)">December</option>
</select>
<p>
<div id="Birthstone" style="font-size:60px;color:red"></div>
</body>
</html>

Could set up display to come from array of 'stones & meanings' instead of the value of the option. :thumbsup:
Would be a fairly easy mod but I don't know the 'meanings' of the stones to give an example. :o

Philip M
10-18-2008, 08:40 AM
Here is a version which actually works:-


<html>
<head>
<script type="text/javascript">
function Show() {
var pick = document.myform.bstone.value;
document.getElementById('Birthstone').innerHTML = pick;
}
</script>
</head>
<body>

<form name = "myform">
Select your birth month:
<select name="bstone">
<option value="" ></option>
<option value="Garnet or Rose Quartz" >January</option>
<option value="Amethyst or Onyx" >February</option>
<option value="Aquamarine or Bloodstone" >March</option>
<option value="Diamond or Quartz" >April</option>
<option value="Emerald or Chrysoprase" >May</option>
<option value="Alexandrite or Moonstone or Pearl" >June</option>
<option value="Ruby or Carnelion" >July</option>
<option value="Peridot or Sardonyx" >August</option>
<option value="Sapphire or Lapis" >September</option>
<option value="Opal or Tourmaline" >October</option>
<option value="Topaz or Citrine" >November</option>
<option value="Tanzanite or Zircon or Tourquoise" >December</option>
</select>

<input type = "button" value ="Show Birthstone" onclick = "Show()">
</form>
<br><br>
<div id="Birthstone" style="font-size:24px;color:red"></div>
</body>
</html>


I have nothing but confidence in you. And very little of that.
Groucho Marx (1890 - 1977)

jmrker
10-18-2008, 06:47 PM
Here is a version which actually works:-

I'm not sure I understand ... what didn't work for YOU?:confused:

Ah ha! ... Just another reason to hate IE

jmrker
10-19-2008, 02:02 AM
OK, this version appears to work with BOTH FF and IE.
It also contains two versions (with and without button display)
and it use DOM or 'getElementById' statements.


<html>
<head>
<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=150326

var Descriptions = [
"",
"January<br>Garnet or Rose Quartz<br>Description 1",
"February<br>Amethyst or Onyx<br>Description 2",
"March<br>Aquamarine or Bloodstone<br>Description 3",
"April<br>Diamond or Quartz<br>Description 4",
"May<br>Emerald or Chrysoprase<br>Description 5",
"June<br>Alexandrite or Monstone or Pearl<br>Description 6",
"July<br>Ruby or Carnelion<br>Description 7",
"August<br>Peridot or Sardonyx<br>Description 8",
"September<br>Sapphire or Lapis<br>Description 9",
"October<br>Opal or Tourmaline<br>Description 10",
"November<br>Topaz or Citrine<br>Description 11",
"December<br>Tanzanite or Zircon or Tourquoise<br>Description 12"
];

function ShowDescription() {
var indx = document.getElementById('pickBirthMonth').selectedIndex;
// var indx = document.myform.bstone.selectedIndex;
document.getElementById('Birthstone').innerHTML = Descriptions[indx];
}
</script>
</head>
<body>

<form name = "myform">
Select your birth month:
<!-- select id="pickBirthMonth" name="bstone" --> <!-- use with button below -->
<select id="pickBirthMonth" name="bstone" onchange="ShowDescription()"> <!-- use without button below -->
<option value=""></option>
<option value="Jan">January</option>
<option value="Feb">February</option>
<option value="Mar">March</option>
<option value="Apr">April</option>
<option value="May">May</option>
<option value="Jun">June</option>
<option value="Jul">July</option>
<option value="Aug">August</option>
<option value="Sep">September</option>
<option value="Oct">October</option>
<option value="Nov">November</option>
<option value="Dec">December</option>
</select>

<!--
<input type = "button" value ="Show Birthstone" onclick = "ShowDescription()">
-->
</form>
<br><br>
<div id="Birthstone" style="font-size:60px;color:red"></div>
</body>
</html>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum