Forum Moderators: open
The posting to the hidden input in a separate form is to reduce transmission overhead (hence the local/server question). That way you're transmitting only selections, not all the text inputs.
The minor JavaScript tedium will be in making it all work with passed values, so the effect is portable. The layout tedium is going to be getting things to work well in positionable entities and including a failsafe form within noscript tags.
Here's a quick CSS widget for the down arrow (use on a white background):
<div style="height:0;
width:0;
margin:2px auto;
padding:0;
overflow:hidden;
border-left:9px solid #fff; <!-- set to background color -->
border-right:9px solid #fff; <!-- set to background color -->
border-top:7px solid #f00;}">
</div>
<div style="height:0;
width:0;
margin:2px auto;
padding:0;
overflow:hidden;
border-left:9px solid #fff;
border-right:9px solid #fff;
border-top:7px solid #f00;">
</div>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Select substitute demo 12-23-04</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
html,body{height:100%;}
#main{height:100%;width:100%;background:#aaf;}
#widg{height:0;width:0;margin:4px auto;padding:0;overflow:hidden;
border-left:5px solid #ada;border-right:5px solid #ada;border-top:5px solid #f00;}
#widgCont{position:absolute;height:12px;width:1.2em;background:#ada;
border:3px outset;margin:0;padding:0;right:0;text-align:center;}
.selNam{background:transparent;border:0;display:block;position:absolute;cursor:default;}
.selOpt{border:0;display:block;width:100%;cursor:default;}
</style>
<script type="text/javascript">
function optSet(){
var in_puts=document.getElementsByName("selOpt_1");
var in_puts_ln=in_puts.length;
for(var i=0;i<in_puts_ln;i++){
in_puts[i].onmouseover=function(){
this.focus();
this.style.background="#faa";
}
in_puts[i].onmouseout=function(){
this.style.background="";
this.blur();
}
in_puts[i].onclick=function(){
document.getElementById("selNam_1").value=this.value; //set selected value
document.getElementById("submSel_1").value=this.value; //set value in separate submission form
document.getElementById("dropDiv_1").style.visibility="hidden";
this.blur();
}
}
}
</script>
</head>
<body onload="optSet();">
<div id="main">
<form id="submiForm" action=""> <!-- form to submit, using less bandwith -->
<input id="submSel_1" type="hidden" value="" />
</form>
<div>
<form id="selForm" action="">
<div style="background:#fcf;border:4px groove #faa;width:10em;position:relative;height:18px;width:11em;margin:0;padding:0;">
<input type="text" id="selNam_1" class="selNam" onclick="document.getElementById('dropDiv_1').style.visibility='visible';" readonly="readonly" value="Select Name" />
<div id="widgCont">
<div id="widg">
</div>
</div>
</div>
<div id="dropDiv_1"
style="position:relative;width:10em;background:#fff;border-top:8px dashed #daa;border-right:10px ridge #afc;border-bottom:12px double #d88;border-left:16px groove #dbb;visibility:hidden;">
<input type="text" name="selOpt_1" class="selOpt" readonly="readonly" value="First Selection" />
<input type="text" name="selOpt_1" class="selOpt" readonly="readonly" value="Second Selection" />
<input type="text" name="selOpt_1" class="selOpt" readonly="readonly" value="Third Selection" />
</div>
</form>
</div>
</div>
</body>
</html>
