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 > JavaScript > Formulieren > [JS] Switch items

Reacties op het script [JS] Switch items

Thomas

Gepost op: 03 februari 2006 - 23:28

Moderator

Als je meerdere items tegelijkertijd wilt verslepen gaat het mis - items worden gedupliceerd.

Stijn

Gepost op: 04 februari 2006 - 01:45

PHP expert

edit: aangepast!!!

Thomas

Gepost op: 14 augustus 2006 - 09:25

Moderator

Omdat ik soortgelijke functionaliteit nodig had, maar toch enkele zaken miste heb ik op dit script mijn eigen variant geschreven.

Ik zag dat een aantal zaken niet echt nodig waren (zoals het controleren of een waarde al in een lijst voorkwam - ik neem aan dat je lijsten zo in elkaar zitten dat er initieel geen dubbele waarden in zitten, de rest van je code zou er dan voor moeten zorgen dat dit ook zo blijft

), en er een aantal zaken ontbraken (zoals verschillende keys en values in je options - als je script er rekening mee houdt dat deze kunnen verschillen, kun je zelf later nog altijd besluiten om voor de keys en values van je dropdown dezelfde waarden te gebruiken - je bent dan i.i.g. niet beperkt door de functie waarmee je je opties kunt verslepen).

Hieronder code+voorbeeld in één (pingpong.html):

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

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function transport(form, from, to)
{
	// shorthand
	var frm = document.getElementById(form);

	var add = new Array(); // array with text and values of selected items
	var rem = new Array(); // list of indexes to remove

	// determine items to copy and remove
	for(var i=0; i < frm.elements[from].length; i++)
	{
		if(frm.elements[from].options[i].selected)
		{
			add[add.length] = new Array(frm.elements[from].options[i].text, frm.elements[from].options[i].value); // to be copied
			rem[rem.length] = i; // to be removed
		}
	}

	// append selected source to target
	for(var i=0; i < add.length; i++)
	{
		var len = frm.elements[to].length; // current length of target
		frm.elements[to].options[len] = new Option(add[i][0], add[i][1]);
	}

	// remove selected items from source - move back from end to maintain order of indexes
	for(var i=(rem.length-1); i > -1; i--)
	{
		frm.elements[from].remove(rem[i]);
	}
}

function spam(form, field)
{
	var frm = document.getElementById(form);

	for(var i=0; i < frm.elements[field].length; i++)
	{
		window.alert(frm.elements[field].options[i].text+", "+frm.elements[field].options[i].value);
	}
}
</script>
</head>

<body>
<form id="whatever" action="pingpong.html" method="post">
<select name="source" multiple="multiple" size="10" style="width:125px">
<option value="10">Amsterdam</option>
<option value="11">Diemen e.o.</option>
<option value="12">Hilversum</option>
<option value="13">Almere</option>
<option value="14">Bussum</option>
<option value="15">Zaandam</option>
</select>

<button type="button" onclick="transport('whatever', 'destination', 'source')">&lt;</button>
<button type="button" onclick="transport('whatever', 'source', 'destination')">&gt;</button>

<select name="destination" multiple="multiple" size="10" style="width:125px">
</select>

<button type="button" onclick="spam('whatever', 'source')">waarden links</button>
<button type="button" onclick="spam('whatever', 'destination')">waarden rechts</button>
</form>
</body>
</html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
function transport(form, from, to)
{
	// shorthand
	var frm = document.getElementById(form);
 
	var add = new Array(); // array with text and values of selected items
	var rem = new Array(); // list of indexes to remove
 
	// determine items to copy and remove
	for(var i=0; i < frm.elements[from].length; i++)
	{
		if(frm.elements[from].options[i].selected)
		{
			add[add.length] = new Array(frm.elements[from].options[i].text, frm.elements[from].options[i].value); // to be copied
			rem[rem.length] = i; // to be removed
		}
	}
 
	// append selected source to target
	for(var i=0; i < add.length; i++)
	{
		var len = frm.elements[to].length; // current length of target
		frm.elements[to].options[len] = new Option(add[i][0], add[i][1]);
	}
 
	// remove selected items from source - move back from end to maintain order of indexes
	for(var i=(rem.length-1); i > -1; i--)
	{
		frm.elements[from].remove(rem[i]);
	}
}
 
function spam(form, field)
{
	var frm = document.getElementById(form);
 
	for(var i=0; i < frm.elements[field].length; i++)
	{
		window.alert(frm.elements[field].options[i].text+", "+frm.elements[field].options[i].value);
	}
}
</script>
</head>
 
<body>
<form id="whatever" action="pingpong.html" method="post">
<select name="source" multiple="multiple" size="10" style="width:125px">
<option value="10">Amsterdam</option>
<option value="11">Diemen e.o.</option>
<option value="12">Hilversum</option>
<option value="13">Almere</option>
<option value="14">Bussum</option>
<option value="15">Zaandam</option>
</select>
 
<button type="button" onclick="transport('whatever', 'destination', 'source')">&lt;</button>
<button type="button" onclick="transport('whatever', 'source', 'destination')">&gt;</button>
 
<select name="destination" multiple="multiple" size="10" style="width:125px">
</select>
 
<button type="button" onclick="spam('whatever', 'source')">waarden links</button>
<button type="button" onclick="spam('whatever', 'destination')">waarden rechts</button>
</form>
</body>
</html>

Misschien het huidige script updaten? Credits zijn nog steeds voor stijn1989

Stijn

Gepost op: 14 augustus 2006 - 15:19

PHP expert

je hebt gelijk

Ik heb het aangepast (goed opgemerkt , zag dat niet eens) maar die controle niet omdat ik daar geloof ik problemen mee kreeg toen ik het script aan het testen was.

mvg stijn

Citaat:

Credits zijn nog steeds voor stijn1989

Thanks

Enkel aanvullende informatie, vragen en antwoorden op vragen zijn welkom.