JavaScript: Auswahloptionen zwischen Listen verschieben

Torben Brodt

Administrator

Lexicon articles: 104

Friday, August 28th 2009, 7:19pm

Content

Abstract

Das Tutorial erläutert wie sie mit wenigen Zeilen Code Auswahloptionen zwischen mehreren Listen verschieben können.

Article

HTML Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>javascript: Auswahloptionen zwischen Listen verschieben</title>
<script type="text/javascript" src="script.js"></script>
<style type="text/css">
<!--
/* demostyle - not necessary to make it work*/
body{font-size:11pt;font-family:Verdana,Arial,Sans}
select {width:200px}
//-->
</style>
</head>
<body onload="sendRequest(null, 'elem1')">
 
<form method="post" action="" id="ajaxSelect">
 
	<table>
		<tr>
			<td>Liste Links</td>
			<td rowspan="2">
				<input type="submit" name="link_rechts" value="&raquo;" onclick="return moveOption(this.form.links, this.form.rechts)"/><br/>
				<input type="submit" name="link_rechts" value="&laquo;" onclick="return moveOption(this.form.rechts, this.form.links)"/><br/>
			</td>
			<td>Liste Rechts</td>
		</tr>
		<tr>
			<td>
				<select name="links" size="10">
					<option value="1">item 1</option>
					<option value="2">item 2</option>
					<option value="3">item 3</option>
					<option value="4">item 4</option>
				</select>
			</td>
			<td>
				<select name="rechts" size="10">
					<option value="1">item 1</option>
					<option value="2">item 2</option>
					<option value="3">item 3</option>
					<option value="4">item 4</option>
				</select>
			</td>
		</tr>
	</table>
 
	<div>
		<input type="submit" />
	</div>
</form>
 
</body></html>

script.js

JavaScript Code

function moveOption(sourceSelect, targetSelect) {
	if(sourceSelect.selectedIndex == -1) {
		return false;
	}
	targetSelect.options[targetSelect.length] = sourceSelect.options[sourceSelect.selectedIndex];
	sourceSelect.options[sourceSelect.selectedIndex] = null;
	return false; // return false to avoid reload/recentering of the page
}

Die eingeführte Funktion moveOption arbeitet mit zwei Parametern. Man übergibt ihr als Referenz die Select-Listen-Elemente.
Diese referenziert man entweder über die id (z.b. mit moveOption(document.getElementById('foo'), ..)) oder überen Namen im Formular (wie im Beispiel).

Das Absenden des Formulars wird verhindert durch die Rückgabe von "false".
Wenn kein Element ausgewählt wurde hat die Eigenschaft "selectedIndex" den Wert -1. In diesem Fall ist nichts zu tun.

3. Demo

Eine Live Demo findet ihr unter http://demo.easy-coding.de/javascript/au…ten-verschieben. Des weiteren wird der kompletten Code hier als ZIP Archiv zur Verfügung gestellt: download.zip.

Torben Brodt has attached the following image: