Hi there mattmill30,
I have come up with a possible solution, but as IE does not recognise any
javascript events on the option element, it's use may not be really useful. :agree:
Also the code works onmouseover of the option elements but not onclick.
Still you may find it mildly interesting. :lol:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<title></title>
<style type="text/css">
h4,#info {
text-align:center;
}
span {
color:#600;
}
form {
width:400px;
margin:0 auto 20px;
}
select {
width:100px;
background-color:#eef;
}
</style>
<script type="text/javascript">
function multipleTest() {
opt=document.forms[0].getElementsByTagName('option');
obj=document.getElementById('info').firstChild;
for(c=0;c<opt.length;c++) {
opt[c].onmouseover=function() {
this.selected=true;
obj.nodeValue+=this.value+', ';
}
}
document.forms[0][2].onclick=function(){
for(c=0;c<opt.length;c++) {
opt[c].selected=false;
}
obj.nodeValue='';
}
}
if(window.addEventListener){
window.addEventListener('load',multipleTest,false);
}
else {
if(window.attachEvent){
window.attachEvent('onload',multipleTest);
}
}
</script>
</head>
<body>
<h4>Mouseover the required options but <span>do not click them</span>.<br>
This will not work in IE browsers.</h4>
<form action="http://www.google.com">
<div>
<select name="alphabet" multiple="multiple" size="21">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
<option value="d">d</option>
<option value="e">e</option>
<option value="f">f</option>
<option value="g">g</option>
<option value="h">h</option>
<option value="i">i</option>
<option value="j">j</option>
<option value="k">k</option>
<option value="l">l</option>
<option value="m">m</option>
<option value="n">n</option>
<option value="o">o</option>
<option value="p">p</option>
<option value="q">q</option>
<option value="r">r</option>
<option value="s">s</option>
<option value="t">t</option>
<option value="u">u</option>
</select>
<input type="submit">
<input type="reset">
</div>
</form>
<div id="info"> </div>
</body>
</html>