Hey,
habe hier die Grundstruktur einer künstlichen Select-Box ohne Forms, nur in Javascript. Das ist jetzt mal der reine Code, das Ding hat kein wirkliches Design oder so, das kann man aber über CSS alles dazubauen. Man könnte auch eine hidden-Textbox dazumachen und die Werte da eintragen, keine Ahnung. Man hat da viele möglichkeiten ...
Hier mal die Klasse:
Combobox = function( class ) {
this.class = class;
this.element;
this.element_x;
this.element_y;
this.selectlist;
this.shown = false;
this.actuallText;
this.actuallClassName = 'combobox'; // diesen Klassennamen kann man beliebig ändern
this.entries = new Array();
}
Combobox.prototype = {
init : function( element, entries )
{
this.element = element;
this.element.className = this.actuallClassName;
this.entries = entries;
}
,
getPosition : function()
{
var elem=this.element, tagname="", x=0, y=0;
while ((typeof(elem)=="object")&&(typeof(elem.tagName)!="undefined"))
{
y+=elem.offsetTop;
x+=elem.offsetLeft;
tagname=elem.tagName.toUpperCase();
if (tagname=="BODY")
elem=0;
if (typeof(elem)=="object")
if (typeof(elem.offsetParent)=="object")
elem=elem.offsetParent;
}
position=new Object();
position.x=x;
position.y=y;
return position;
}
,
setEntry : function( newEntry )
{
this.hide();
this.element.innerHTML = newEntry;
}
,
show : function( element, entries )
{
if( element != null && entries != null )
this.init( element, entries );
this.element_x = this.getPosition().x;
this.element_y = this.getPosition().y;
if(this.element.tagName.toUpperCase() == "DIV" && !this.shown)
{
this.element.className += ' cur';
this.actuallText = this.element.innerHTML;
this.selectlist = document.createElement('UL');
for(i = 0; i < this.entries.length; i++)
{
this.selectlist.innerHTML += '<li><a href="#"'+((this.entries[i][1] == this.actuallText)?' class="cur"':'')+' onclick="'+this.entries[i][0]+' '+this.class+'.setEntry(\''+this.entries[i][1]+'\')">'+this.entries[i][1]+'</a></li>';
}
this.selectlist.style.top = this.element_y;
this.selectlist.style.left = this.element_x;
this.selectlist.style.position = 'absolute';
this.selectlist.style.zIndex = '50';
this.selectlist.style.marginTop = '3px';
this.selectlist.style.marginLeft = '-4px';
this.selectlist.style.listStyle = 'none';
this.element.appendChild( this.selectlist );
this.shown = true;
}
}
,
hide : function()
{
if(this.shown)
{
this.element.removeChild( this.selectlist );
this.shown = false;
this.element.className = this.actuallClass;
}
}
}
Alles anzeigen
Um das ganze zu initialisieren muss einfach nur darunter folgendes kommen:
combo = new Combobox('combo');
entries = new Array(new Array('', 'text1'), new Array('', 'text2'), new Array('', 'text3'))
Wichtig: wenn die referenz auf das Objekt Bombobox "combo" ist (so wie hier) muss dem Konstruktor ebenfalls der String "combo" übergeben werden.
im zweidimensionalen Array "entries" werden die Einträge übermittelt ... wobei der erste wert die function ist, die die im onclick-event der einzelnen einträge steht und der zweite wert der angezeigte stringt ist
mit
div.combobox li a.cur {} kann man in css definieren, wie einträge aussehen, wenn sie markiert sind.
um das ganze nun aufzurufen nehme man:
<div onmousedown="combo.show(this, entries)">Combobox</div>
mit combo.hide() wird das ganze wieder zugemacht.
viel vergnügen
lg