Thanks for the reply Rob, What I am trying to achieve is when the user
selects an item in the list, depending on the selection I want to
enable and make visible some other objects on the page. I have a real
pain in the ass supervisor who doesn't think my idea to make the
current project run in a browser versus a client / server app, and one
of her things is being able to use the keyboard and not have to switch
back and forth between keyboard and mouse.....so in my attempt to prove
myself right and her wrong, I really need this to work with just using
the keyboard down arrow and up arrow.....now one thought I did have
since the event fires when I tab away from the list, is in the function
that fires, I could set the focus to the first enabled object that the
routine just made enabled thus giving the illusion that it's doing what
I want.....
Any other thoughts or ideas would be greatly appreciated.....
You can use a combination of onkeyup and onchange, which seems to work
OK (read thread above). You should have a reset function that returns
the form to the default onload (otherwise some browsers will show a
selected option that does not match the page content), if you want it to
act more like a form, then a reset button should be included too (see
example below).
onkeyup introduces a touch of lag, onkeydown selects the previous option
(maybe that's OK?).
<body onload="document.formA.reset();">
<script type="text/javascript">
function changeIt( el ){
var x = document.getElementById('xx').firstChild;
x.data = el.options[el.selectedIndex].text;
}
</script>
<form action="" id="formA" name="formA">
<select name="selectA" size="1"
onchange="changeIt( this );"
onkeyup ="changeIt( this );"<option selected>
<option>test 1
<option>test 2
<option>test 3
<option>test 4
<option>test 5
<option>test 6
<option>test 7
</select>
<input type="reset" onclick="
this.form.selectA.selectedIndex=0;
changeIt(this.form.selectA);
">
</form>
<div id="xx"> </div>
