Inhaltsverzeichnis
Code
index.htmlQuellcode
- <!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="»" onclick="return moveOption(this.form.links, this.form.rechts)"/><br/>
- <input type="submit" name="link_rechts" value="«" 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
Quellcode
- 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
- }
Quelle und Ziel definieren
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.
Demo
Eine Live Demo findet ihr unter demo.easy-coding.de/javascript…ischen-listen-verschieben. Des weiteren wird der kompletten Code hier als ZIP Archiv zur Verfügung gestellt: download.zip.9.021 mal gelesen