Netprog
Stupid JavaScript Tricks: Using a SELECT as a Menu Source


<h2>Use the select menu to pick a famous quote</h2>

<hr />
<form id="quoteform">
<table>
<tr>
<td valign="top">select a person:
<select id="selector" size="1" onchange="newquote()" style="font-weight:bold;">
  <option value="0" selected="selected" >Yogi Berra</option>
  <option value="1">George W.</option>
  <option value="2">Bill Clinton</option>
  <option value="3">Cookie Monster</option>
  <option value="4">Dave H.</option>
  <option value="5">anonymous student</option>
  <option value="6">Kermit</option>
</select>
</td>
<td width="50"></td>

<td>
<textarea cols="50" rows="5"  name="quote" 
           style="font-family:sans-serif; font-size:12pt; color: blue;">
</textarea>
</td>
</tr>
</table>
</form>

<script>

 quotes = new Array("The game isn't over til it's over",
				   "I know what I believe.I will continue to articulate what I believe and what I believe -- I believe what I believe is right.",
                   "It depends on what the meaning\nof the word is is.",
                   "COOOOOOOOOKKKIIIEEE!",
                   "Blah, blah, blah, blah, blah, blah, blah, blah\n" +
                   "foo\nblah, blah, blah, blah, blah, blah, blah, ...",
                   "I made cookies, but my dog ate them...",
		   "It's not easy being green"
);

function showquote(x) {
   document.forms["quoteform"].quote.value='"'+quotes[x]+'"';
}

function newquote() {
  index=document.forms["quoteform"].selector.selectedIndex;
  author=document.forms["quoteform"].selector.options[index];
  showquote(index);
}

newquote(0);

</script>

<hr />


<h2>Use this select to switch to a different javascript demo</h2>


<form id="demoform">
<table>
<tr>
<td valign="top">select a demo:
<select name="demoselector" size="1" onchange="newdemo();" style="font-weight:bold;">
  <option value="0" selected="selected" >demo home page</option>
  <option value="1">cookie chase</option>
  <option value="2">moving browser</option>
  <option value="3">active bullets</option>
  <option value="4">document object properties</option>
  <option value="5">background color</option>
  <option value="6">back button</option>
  <option value="7">divs</option>
</select>
</td>
</tr>
</table>
</form>

<script>

 urls = new Array("../index.html",
                  "../cookiechase/cookiechase.html",
                  "../windowjump/windowjump.html",
                  "../activebullet/activebullet.html", 
                  "../props/props.html", 
                  "../background/background.html",
                  "../backbutton/backbutton.html",
                  "../divs/divs.html");

// loads a new page
function gotourl(x) {
   document.location= urls[x];
}

// figures out which page to go to
function newdemo() {
  index = document.forms["demoform"].demoselector.selectedIndex;
  gotourl(index);
}

</script>






NetProg