Scripts - Tutorials - Forum - Downloads - Showcase - Contact

Artikels

VPN vergelijken

Algemeen

Beginpagina

FAQ

Grafische worm (243)

Links

Nieuwsartikels

Nieuwsarchief

Boeken programmeren

Overzicht

Samenwerken

Webhosting

Zoek op Sitemasters

Leden

Registreren

Ledenlijst

Ons team

Links

webhostingtop10.be

Sociale media

Follow @sitemasters

Sitemasters

Adverteren op Sitemasters?

Contacteer ons

RSS

Link naar ons

Donaties

Poll

Je moet ingelogd zijn om te stemmen.

Statistieken

Linkpartners

Scripts:

Scripts > JS > Formulieren > Inputbox als Select

Inputbox als Select

Auteur: BramBo - 22 januari 2008 - 23:06 - Gekeurd door: Gerard - Hits: 2918 - Aantal punten: 4.00 (1 stem)

Copy paste

inits :

php code - Bekijk de code zonder highlighting - Klap code in

var dropDown 		   = new Array();
var dropDownAoptions	= new Array();
dropDownAoptions[0] 	= new Array(2, "value");
dropDownAoptions[1] 	= new Array(4, "waaa");

var dropDown 		   = new Array();
var dropDownAoptions	= new Array();
dropDownAoptions[0] 	= new Array(2, "value");
dropDownAoptions[1] 	= new Array(4, "waaa");

Aanmaken (beste in 'n window.onload/domLoaded of onder n andere event):

php code - Bekijk de code zonder highlighting - Klap code in

                dropDown[0] = new dropDowner('dropDownA', dropDownAoptions);
            
dropDown[0] = new dropDowner('dropDownA', dropDownAoptions);

Code:

"javascript" code - Bekijk de code zonder highlighting - Klap code in

                <!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>

            
<!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>
 

Download code (.txt)

Stemmen

Niet ingelogd.

Reacties

Post een reactie

Lees de reacties (2)