<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Inputbox als Dropdown</title>
<script type='text/javascript'>
var dropDown = new Array();
var dropDownAoptions = new Array();
dropDownAoptions[0] = new Array(2, "value");
dropDownAoptions[1] = new Array(4, "waaa");
window.onload = function() {
dropDown[0] = new dropDowner('dropDownA', dropDownAoptions);
// add Optie
dropDown[0].addOption(20, "Nog een waarde");
/*
uitlezen dropDowners voor wanneer je het formulier gaat verzenden.
Dus zet de waarde van alle velden op de id van de gekozen options.
for(var i=0, j=dropDown.length;i<j;i++) dropDown[i].element.value = dropDown[i].selected[0];
*/
}
function dropDowner(id, options) {
if(id==null||!typeof(id)=="string") return;
this.element = document.getElementById(id);
this.id = id;
this.options = new Array();
this.selected = new Array(-1, "");
this.addOptions = function(options) {
if(!typeof(options)=="object") return false;
for(var i=0,j=options.length;i<j;i++) {
if(typeof(options[i])=="object") {
this.options[i] = new Array();
this.options[i][0] = options[i][0];
this.options[i][1] = options[i][1];
}
else return false;
}
return true;
}
this.addOption = function(id, value) {
if(id==null||id<0||value==""||value==null) return false;
var l = this.options.length;
this.options[l] = new Array();
this.options[l][0] = id;
this.options[l][1] = value;
return true;
}
this.up = function() {
var l = this.options.length, i = this.selected[0];
i = (--i<0) ? --l: i;
this.select(i);
}
this.down = function() {
var l = this.options.length, i = this.selected[0];
i = (++i>=l) ? 0: i;
this.select(i);
}
this.select = function(id) {
if(id==null||id<0||id>this.options.length) return false;
this.element.value = this.options[id][1];
this.selected[0] = id;
this.selected[1] = this.options[id][1];
return true;
}
if(typeof(options)=="object") this.addOptions(options);
}
</script>
<style type='text/css'>
.dropdown {
background : #fff;
border : 1px solid #838383;
}
a, a:hover {
font-weight : bold;
color : #838383;
font-size : 11px;
text-decoration : none;
border : 1px solid #838383;
padding : 2px 5px 2px 5px;
margin : 5px;
}
a:hover {
background : #BBB;
text-decoration : underline;
}
</style>
</head>
<body>
<div>
<input type='text' class='dropdown' value='' id='dropDownA' disabled='disabled' /><br />
<a href="javascript:dropDown[0].up();">^</a>
<a href="javascript:dropDown[0].down();">v</a>
</div>
</body>
</html>