JavaScript - Dynamic Onclick Add To Td Not Working :(

Hi everyone,

I'm a JavaScript newbie and am trying to use it to direct users to a search page based on the values of two drop down boxes. The issue i am having is that the code below works fine on a test page, but not on my test domain (with wordpress theme) and so i was wondering whether there is anything I am doing wrong...

Is onclick already defined maybe? I'm not sure how it works to be honest...

Code:

<script type="text/javascript">
function gosearch() {
var breed = document.getElementById('breed').value;
var area = document.getElementById('area').value;
var site = "http://hairloss-help.net/?s=";
var searchurl = site + breed + area;

window.location.href = searchurl;
}
</script> 

<strong>Breed</strong>
<select name="breed" id="breed">
<option value="">&gt; All</option>
<option value="Affenpinscher+">Affenpinscher</option>
<option value="Afghan+Hound+">Afghan Hound</option>
<option value="Airedale+Terrier+">Airedale Terrier</option>
<option value="Akita+">Akita</option>
<option value="Alaskan+Malamute+">Alaskan Malamute</option>
<option value="Alsation+">Alsation</option>
<option value="American+Cocker+Spaniel+">American Cocker Spaniel</option>
<option value="Anatolian+Karabash+">Anatolian Karabash</option>

</select>

<strong>Area</strong>
<select name="area" id="area">
<option value="all">&gt; All Areas</option>
<optgroup label="England">
<option value="Avon">Avon</option>
<option value="Bedfordshire">Bedfordshire</option>
<option value="Berkshire">Berkshire</option>
<option value="Bristol">Bristol</option>
<option value="Buckinghamshire">Buckinghamshire</option>
<option value="Cambridgeshire">Cambridgeshire</option>
<option value="Cheshire">Cheshire</option>
<option value="Cleveland">Cleveland</option>
<option value="Cornwall">Cornwall</option>

</select>

<input type="button" name="gobutton" id="gobutton" value="Go!" onclick="gosearch();" />

The domain I'm currently testing this on is http://www.hairloss-help.net.

Any help would be much appreciated.

Thanks

Sam

I am creating a weather widget for the iphone. The program creates an xml request for a weather feed and then parses the response. Depending on the response different information is displayed. A different icon for each weather pattern. I have all of this working so far. What I want to integrate is the option to refresh the weather when a user taps on the icon.

Here is my code:


Code:

document.getElementByID("weatherIcon").innerHTML="<img src=\"Icon Sets/"+iconSet+"/"+MiniIcons[obj.icon]+iconExt/" border=2 onclick=\"refresh();\">"

Code:

function refresh()
{
weatherRefresherTemp();
}

I know that the function refresh works because it is called from another function that allows the refresh to happen automatically every 30 min. However, wanting to integrate an option to manually refresh I am trying to do it this way. The code never seems to fire, nothing happens. I've added the border option for testing and don't even see that. I've been using a javascript editor and I do not get any errors. Any suggestions would be greatly apprectiated.

I'm having a small issue with being able to use the onclick more than once. When I load the page and click the link the request works fine the first time. But if I cancel the request then goto click the link again, nothing happens.


Code:

<a href="javascript:void();" onclick="sendRequest()">Send the request</a>

<script>
var request = {
    method: 'postrequest',
    message: 'You will like it',
    data: '123key'
};
function sendRequest() {
    postReq(request, function (a) {
        if (a && a.post_id) {
             
//Do something if sent
            
        } else {

//Do something if cancelled
       
        }
    })
}
</script>

Hey everyone,
I am having troubles with my form not working correctly in IE. I have onclicks for different parts of my site. I am trying to use onclick and divs to make this happen. Can some look at my code and help me out?
Thanks/
Code:

<script type="text/javascript">
function switchFS(obj) {
	var fset,i,fsclass;
	fset=document.getElementsByTagName('fieldset');
	fsclass = obj;
	for ( i=0; i<fset.length; i++) {
		if ((fset[i].getAttribute('class') != "user") && (fset[i].getAttribute('class') != fsclass)) {
			fset[i].style.display = "none";
		} else {
			fset[i].style.display = "block";
		}
	}
}
</script>


</head>

<body id="submitform">
<div id="container">
	<div id="header">
    <?php include($dirprefix . "external/include/header.html"); ?>	
    </div><!-- end header -->
    <div id="maincontent">
    <h3>&nbsp;</h3>
    <?php include($dirprefix . "external/include/menu_inactive.html"); ?>	
    
    <div id="bodycontent">
    <div id="bodyleftcol">
    <h4>Contact</h4>
    <h5>Registration</h5>
    </div>
    <div id="bodyrightcol">
	<h1 class="formhead">Site Registration</h1>
	<p>Please register if you are a Zimmer customer, or an agency or designer working on behalf of one. Completing the requested information will enable us to continue to update and improve site content. Please make note of your password for future reference. You will receive an email with your login information.</p>
	<div id="mainrightcol">
  <form name="form" id="register" method="post" action="processregister.php">
  
  	<fieldset class="user">  
	<legend>i am a:</legend>
		<label><input type="radio" value="Healthcare provider" class="checkbox" name="usertype" onclick="switchFS('healthcare');" /> Healthcare provider</label>
        <label><input type="radio" value="Agency or designer for a customer" class="checkbox" name="usertype" onclick="switchFS('agency');" /> Agency or designer for a customer</label>
		<label><input type="radio" value="Independent agency or designer" class="checkbox" name="usertype" onclick="switchFS('agency');" /> Independent agency or designer</label>
		<label><input type="radio" value="Zimmer employee" class="checkbox" name="usertype" onclick="switchFS('zimmer');" /> Zimmer employee</label>
        <label><input type="radio" value="Zimmer field representative" class="checkbox" name="usertype" onclick="switchFS('zimmer1');" /> Zimmer field representative</label>
		<label><input type="radio" value="Media" class="checkbox" name="usertype" onclick="switchFS('user');" /> Media</label>
		<label><input type="radio" value="Healthcare Author/Publisher" class="checkbox" name="usertype" onclick="switchFS('author');" /> Healthcare Author/Publisher</label>
		<label><input type="radio" value="Other" class="checkbox" name="usertype" onclick="switchFS('user');" /> Other</label>
	</fieldset>
    
    <fieldset class="zimmer" style="display: none;">
    <legend>zimmer information</legend>
        <!--<label for="businessunit">Zimmer business unit: <input type="text" name="businessunit" value="" required="required" /></label>-->
        <label for="division">Zimmer business unit: 
        <select name="division">
			<option value="">- n/a -</option>
			<option value="Knees">Knees</option>
			<option value="Hips">Hips</option>
			<option value="Extremities">Extremities</option>
			<option value="Trauma">Trauma</option>
            </select></label>
    </fieldset>
    
    <fieldset class="zimmer1" style="display: none;">
    <legend>zimmer information</legend>
        <!--<label for="businessunit">Zimmer business unit: <input type="text" name="businessunit" value="" required="required" /></label>-->
        <label for="distributorship">Zimmer distributorship: 
        <input type="text" name="distributorship" value="" required="required" /></label>
    </fieldset>

I have added the javascript and the section of code where the user picks how they are. Once you click on one of the users in IE the form goes away.

Hey guys, I have this JS.

Code:

function funcBut(){
	document.getElementById('ref_button').innerHTML = 'pressed';
}

Now, this button activates the function with no problem:
Code:

<input type='button' onclick='funcBut();' value='Change Text'/><br />

But this link won't work and I don't understand why
Code:

<a href="#" onclick="funcBut(); return false;">test</a><br />

Can anyone help?

Hi,

I would like to change the style on my onclick on my radio buttons not sure why it's not working?!


PHP Code:
<div id="Available" <?php if($mondayamstart == "Unavailable"){ echo 'style="visibility:hidden!important;"';} else { echo 'style="visibility:visible!important;"';} ?>>
<select name="Monday_am_startH" id="Monday_am_startH">
<?php
for ($i=0; $i<24; $i++)
{
    if($i<10)
    {
        $i = sprintf("%02d",$i);
    }
    echo '<option'.($i==substr($mondayamstart,0,2)? ' selected' : '').' value="'.$i.'">'.$i.'</option>';
}
?>
</select>
:
<select name="Monday_am_startM" id="Monday_am_startM">
<?php
for ($i=0; $i<60; $i++)
{
    if($i<10)
    {
        $i = sprintf("%02d",$i);
    }
    echo '<option'.($i==substr($mondayamstart,3,2)? ' selected' : '').' value="'.$i.'">'.$i.'</option>';
}
?>
</select>
</div>
<div id="Unavailable">&nbsp;</div>
<br />
<input type="radio" name="Monday_am_startRad" value="AvailableMon" <?php if($mondayamstart != "Unavailable"){ echo "checked";} ?> onClick:"document.getElementByID('available').style.visibility:visible;'"> Available <br /><input type="radio" name="Monday_am_startRad" value="UnavailableMon" <?php if($mondayamstart == "Unavailable"){ echo "checked";} ?> onClick:"javascript'getElementByID('Unavailable')style.visibility:hidden;'"> Unavailable

Code:

<img id="who" class="who" src="who.jpg" alt="Warriors Chosen For Battle" title="Warriors Chosen For Battle">
<img id="chosen" class="selector" src="selector.jpg" alt="Click for next image" title="Click for next image" onclick="chosen()">
<img id="ambassador" class="selector" src="selector.jpg"  alt="Click for next image" title="Click for next image"onclick="ambassador()">

Code:

function chosen()
{
document.getElementById("who").src="chosen_for_christ.jpg";
}

function ambassador()
{
document.getElementById("who").src="ambassador.jpg";
}

Yeah so basically when I click on one of the selector images I want it to change the value "who" images src value. I'm making an image selector, it works fine in IE, but every other browser it refuses to do anything.

I would like onclick to only work from div id="telli", but instead it works on all the divs.. I've tried a lot of different things, nothing has worked so maybe somebody can help me. I would like the div telli to open up a popup layer onclick. Please help me.. I am a newbie to Javascript

HTML sheet:
<body>

<div id="main">
<div id="header">
<div id="content">
<div id="sidebar">
<div id="telli</div>
<div id="footer">

</div>
</div>
</div>
</div>
</div>


</body>


CSS sheet:
html {
background: url(back.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position:relative;
}

#main {
background-image:url(ground.png);
position:absolute;
margin-left:auto;
margin-right:auto;
width:1300px;
height:1200px;

}

#header {
background-image:url(header.png);
position:absolute;
width:1300px;
height:1200px;
}

#content {
background-image:url(content.png);
position:absolute;
width:1300px;
height:1200px;
}

#telli {
background-image:url(telli.png);
position:absolute;
width:1300px;
height:1200px;
}

#sidebar {
background-image:url(sidebar.png);
position:absolute;
width:1300px;
height:1200px;
}

#footer {
background-image:url(footer.png);
position:absolute;
width:1300px;
height:1200px;
}

Hello....I have written a PHP script for a secure client login system and it is working on Firefox and Chrome. But it doesn't work on Safari and IE. I have noticed that some of the javascript functions do not work at all while a few of them work. Can somebody please take a look and let me know what could be wrong?

I am pasting the part of my code that does't work up he

<script type="text/javascript">
function newdir(i)
{
alert('Newdir!');
var newdir=prompt("Please enter the name of the folder");
if (newdir!=null && newdir!="")
{
document.getElementById('newdir').value= newdir;
document.getElementById('folder').value= i;
document.getElementById('download').value = '';
document.myform.submit();
}
}



</script>

<?php

$dir = '../Users/gcreddy/'

echo '<tr><td></td><td></td><td><a href=# onMouseOver="this.src=\'images/delete_s.png\';" onMouseOut="this.src=\'images/delete.png\';" onClick="setdir(&apos;'.$dir.'&apos"><img src="images/delete.png" name="Delete"></a></td><td></td><td></td><td><a href=# onMouseOver="document.newdirimg.src=\'images/newdir.png\';" onMouseOut="document.newdirimg.src=\'images/newdir_s.png\';" onClick="newdir(&apos;'.$dir.'&apos"><img src="images/newdir_s.png" name="newdirimg"></a></td></tr>';

echo '<tr><td></td><td></td><td>Upload file:<input type="file" style="background-color:gray;" name="datafile" size="40"></td><td><a href=# onMouseOver="document.load.src=\'images/upload_s.png\';" onMouseOut="document.load.src=\'images/upload.png\';" onClick="upload(\''.$dir.'\')"><img src="images/upload.png" name="load"></a></td><td><input type="hidden" name="login" value="'.$user.'"><input type="hidden" name="password" value="'.$password.'"><input type="hidden" name="number" value="'.$indexCount.'"><input type="hidden" id="folder" name="folder" value=""><input type="hidden" id="newdir" name="newdir" value=""></td><td><input type="hidden" id="download" name="download" value=""></td><input type="hidden" id="Delete" name="Delete" value=""></tr></TABLE></form>';

?>

When I click on the create folder button (newdir.png), I don't see the alert message that I gave for debugging. I have the SAME problem with 2 more buttons on the same page.

I would be glad if somebody could let me know what the problem / solution is.

Regards,
G.C.Reddy

I am trying to autofill a box by clicking a link (with return false). The function to autofill works with button tag but not in anchor tag - instead of returning false, the click event transitions to the href.

Here is the simplified code. Any help is appreciated.Thanks

<!DOCTYPE html PUBLIC"-// W3C//DTD Xhtml 1.0 Strict//EN"" http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Untitled Page
</title>
</head>

<script type="text/javascript">
function autofill(frm){
frm.box2.value = 'sample_value';

}
</script>
<body>
<FORM NAME="browse" ACTION="<TMPL_VAR MYURL>/browse_results">
<font size="5">
<b>FIND
</b>
</font>
<hr>
<div class="menu" id="find_block">
<ul>
<li>
<a href="#">DOMAINS
</a>
<ul>
<li>

<a href="#1" onclick="alert('Heading Home!'); return false;">1. alert with link
</a>
</li>
<li>
<a href="#2" onClick="autofill2(this.form); return false;">2. autofill with link

</a>
</li>
</ul>
</li>
</ul>
<input readOnly name="box2"/>
<INPUT TYPE=BUTTON OnClick="autofill(this.form,'2')" VALUE="autofill with button ">
</div>
<br>
<font size="5">
<b>WHERE
</b>
</font>
<hr>
</FORM>
</body>
</html>

Below is the code that is using the name FFF in
various places. The effect of all this is that the onclick function is not executed.
I would expect a pop up alert when clicking the submit button.

This only happens if I rename either the form id or the js variable.
Can anyone explain what is going on here ?

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Title</title>
    </head>
    <script type="text/javascript">
        function newobject(){
            this.exec=exec;
            function exec(){
                alert("exec");
            }
        }
         FFF  = new newobject();
    </script>
    <body>
        <form id=" FFF " name="somename" action="" method="GET">
            <input type="text" id="someid" name="somename" value="value">
            <input onclick=" FFF .exec()" type="submit" id="submitid" name="somesubmit"  value="xxx">
        </form>
    </body>
</html>

Regards
Heinz

I hate javascript....

OK, here's my latest challenge with Javascript. I recently went into twp php files and made a few very minor changes to some outdated $date functions. Now, I have three small icons for 'copy', 'paste','delete' using the javascript 'onclick' function that have stopped working.

In fact, when I replace the two recently revised files with the originals, these icons no longer work there either.

Any help would be appreciated. I'm simply at a total loss for ideas here.

From the primary php file is the relevant lines of source code....As far as I can tell, the second paragraph in each area is returning a 'null' value; i.e. o1a.options.selectedIndex is null.

Code:

function aCopy(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);

avail_1a = o1a.options.selectedIndex;
avail_1b = o1b.options.selectedIndex;
avail_2a = o2a.options.selectedIndex;
avail_2b = o2b.options.selectedIndex;
avail_3a = o3a.options.selectedIndex;
avail_3b = o3b.options.selectedIndex;
}

function aPaste(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);

o1a.options.selectedIndex = avail_1a;
o1b.options.selectedIndex = avail_1b;
o2a.options.selectedIndex = avail_2a;
o2b.options.selectedIndex = avail_2b;
o3a.options.selectedIndex = avail_3a;
o3b.options.selectedIndex = avail_3b;
}

function aDelete(dt){
o1a = document.getElementById("avail_1a_" + dt);
o1b = document.getElementById("avail_1b_" + dt);
o2a = document.getElementById("avail_2a_" + dt);
o2b = document.getElementById("avail_2b_" + dt);
o3a = document.getElementById("avail_3a_" + dt);
o3b = document.getElementById("avail_3b_" + dt);

o1a.options.selectedIndex = 0;
o1b.options.selectedIndex = 0;
o2a.options.selectedIndex = 0;
o2b.options.selectedIndex = 0;
o3a.options.selectedIndex = 0;
o3b.options.selectedIndex = 0;

From the supporting php file are the following lines of code....
Code:

$s .= "<td nowrap=nowrap class=calendar style='border-left:1px dashed #000;'>";
$s .= "<a href='javascript:void(0);' onclick=\"aCopy('$year-$month-$d');\"><img src='../admin/_calendar/Copy.gif' alt='Copy Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aPaste('$year-$month-$d');\"><img src='../admin/_calendar/Paste.gif' alt='Paste Availability' width='16' height='16' border='0' /></a>";
$s .= " <a href='javascript:void(0);' onclick=\"aDelete('$year-$month-$d');\"><img src='../admin/_calendar/Delete.gif' alt='Delete/No Availability' width='16' height='16' border='0' /></a>";
$s .= "</td>";

None of these lines of code were changed or altered when I was updating the code.

Any thoughts or suggestions would be deeply appreciated?

Talltom

Code:

 
	 Quote:

	

	
		

			
				<html>
<head>
<script language="javascript">
var myWindow;
function christDoes(){
    mydWindow=open("secondary.html", "yes");
    }

    </script>
</head>
<body><form name="myform" method=POST ACTION="sake.html" ><CENTER>
<B>ENTER YOUR SUBJECT</B><INPUT TYPE="TEXT" NAME="subject">
<input type="button" name="ok" value="OK" onClick="christDoes()">
</form>
</body>
</html>
			
		

	
	

Code:

 
	 Quote:

	

	
		

			
				<html>
<head>
<script language="javascript">
function me(){
displayColor();
}
function displayColor() {
function newWindow(strWin,strURL,intX,intY,intWidth,intHeight){
winChild =window.open(strURL,strWin,'left=' + intX + ', screenX =' + intX + ', top=' + intY + ', screenY=' + intY + ', width=' + intWidth + ', height=' + intHeight + ', scrollbars=yes, toolbar=yes');

}

function closeChild(){
    if(winChild){
         winChild.close();
    }
}


var m=0;
var fSubject = self.opener.document.forms[0].subject.value;
	if(fSubject.length>0){
	if(isNaN(fSubject)){fSubject="";}
	else{opener.alert("Please enter figure");}
	numSub=parseInt(fSubject);
	if(numSub==5){var strSub="abcde";}
	self.document.write("<center>" +"ENTER SUBJECT HERE" +"</center><br>");
	var mercy="<HTML><BODY>"
	mercy +="<CENTER>"
	sub=new Array(strSub.length);
	for(var i=0; i<sub.length; i++){
	m++;
	mercy +=m +"<input type='text' name='sub[i].toLowerCase()'>" +"<BR>";
	opener.alert("You have entered" +m +"subjects");
	}
	}
	mercy +="</CENTER></FORM></BODY></HTML><BR></BR>";
	self.document.write(mercy +"<BR>");
	self.document.bgColor="pink";
	newWindow();

document.write("<center><input type=\"button\"  name=\"  submit\"  value=\"SUBMIT\" onClick=newWindow('winChild','child.htm',100,100,200,200)><center>");
}

</script>
</head>
<body onload='me()' onFocus="closeChild();" onUnLoad="closeChild()">

<form></form>
</body>
</html>
			
		

	
	

Code:

 
	 Quote:

	

	
		

			
				<HTML>
<HEAD>
<META NAME="GENERATOR" Content="Microsoft Visual Studio 6.0">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var winGrandChild;
function newWindow(strWin,strURL,intX,intY,intWidth,intHeight){
winGrandChild =window.open(strURL,strWin,'left=' + intX + ', screenX =' + intX + ', top=' + intY + ', screenY=' + intY + ', width=' + intWidth + ', height=' + intHeight + ', scrollbars=yes, toolbar=yes');
}
function closeGrandChild(){
    if(winGrandChild){
         winGrandChild.close();
    }
}
//-->
</SCRIPT>

</HEAD>


<BODY onFocus="closeGrandChild();" onUnload="closeGrandChild();">
<form>
<INPUT type="button" value="Open Window" name=button1 onClick=newWindow('winGrandChild','grandchild.htm',200,200,200,200)>
<form>
</BODY>
</HTML>
			
		

	
	

can somebody please tell me what need done. Everything is working fine except for the button created in javascript that is in the second window which is to open the third window. Thanks.

Hello all, my second post!

I finally got the below script working in Firefox and was really pumped about it until I realized it didn't load in Google chrome or Safari.

What this script does is its a dual onclick event which makes a hidden div appear and loads an iframe within the now visible div. Here is the code, I would love any input on how to make this work in other browsers.

Here is the header code:
Code:

<SCRIPT type="text/javascript">
<!--

var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}
//-->
</script>


<SCRIPT type="text/javascript">
function loadIframe(iframeName, url) {
if ( window.frames[iframeName] ) {
window.frames[iframeName].location = url;
return false;
}
else return true;
}
</script>

Here is the code on the page where a link click shows the hidden div and loads the iframe contained.
Code:

<p><a href="#" onclick="showhide('div1');return loadIframe('ifrm1', 'http://www.google.com');">show/hide me</a></p>

</td></tr>
<div id="div1" style="display: none; position: fixed; z-index:4; width: 1010px; height: 500px; left: 5%; top: 15%;  background-color: #f0f0f0; 	border: 1px solid #000; padding: 10px;"><iframe name="ifrm1" id="ifrm1" width="100%" height="90%" scrolling="yes" frameborder="0">Sorry, your browser doesnt support iframes.</iframe><p><a href="#" onclick="showhide('div1')">close</a></div>';

As always, any input is greatly appreciated!

I knocked up the following code in response to a recent question in this forum, but it has a defect which I can't overcome.

If the user types "a" then the select box is populated with "Choose An Animal...", then the three three animals beginning with A. So far so good. But if the user selects say Albatross and then types the letter b then the option "Bear" is selected rather than "Choose An Animal". Although the code is sel.selectedIndex = 0; (not 1).

Question - How can I force the selected index to 0 when a choice has been made previously? Is this a bug - if so it is the same in IE and FF.

Code:

<html>
<head>
</head>
<body>

<form name = "myform">
<select id = "mysel" onchange = "alertValue()">
</select>
</form>

<script type = "text/javascript">

function alertValue() {
var x = document.getElementById("mysel").value;
alert ("You selected " + x);
}

var words65 = ["Albatross","Anteater", "Aardvark"];
var words66 = ["Bear", "Bat","Bison", "Bobcat"];
var words67 = ["Cat", "Cougar","Canada Goose", "Caribou"];

var key;

document.onkeydown = function(ev) {	
ev = ev || event;
key = ev.keyCode;

if ((key >= 65) && (key <= 90)) {  // a-z
tmp = eval("words" + key);

var sel = document.getElementById("mysel");
sel.options.length = 0;
sel.options[0] = new Option('Choose An Animal...','',true,true); // text value defaultSelected selected

for (var i=0; i<tmp.length; i++){
if (tmp[i]) {
sel.options[sel.options.length]=new Option(tmp[i],tmp[i],false,false);  // text value defaultSelected selected
}
}
sel.selectedIndex = 0;  // WHY DOES THIS NOT WORK?
}

}

</script>

</body>
</html>