JavaScript: Auswahloptionen zwischen Listen verschieben

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

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

    Inhaltsverzeichnis

    Code

    index.html

    Quellcode

    1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
    2. <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" xml:lang="de">
    3. <head>
    4. <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
    5. <title>JavaScript: Auswahloptionen zwischen Listen verschieben</title>
    6. <script type="text/javascript" src="script.js"></script>
    7. <style type="text/css">
    8. <!--
    9. /* demostyle - not necessary to make it work*/
    10. body{font-size:11pt;font-family:Verdana,Arial,Sans}
    11. select {width:200px}
    12. //-->
    13. </style>
    14. </head>
    15. <body onload="sendRequest(null, 'elem1')">
    17. <form method="post" action="" id="ajaxSelect">
    19. <table>
    20. <tr>
    21. <td>Liste Links</td>
    22. <td rowspan="2">
    23. <input type="submit" name="link_rechts" value="&raquo;" onclick="return moveOption(this.form.links, this.form.rechts)"/><br/>
    24. <input type="submit" name="link_rechts" value="&laquo;" onclick="return moveOption(this.form.rechts, this.form.links)"/><br/>
    25. </td>
    26. <td>Liste Rechts</td>
    27. </tr>
    28. <tr>
    29. <td>
    30. <select name="links" size="10">
    31. <option value="1">item 1</option>
    32. <option value="2">item 2</option>
    33. <option value="3">item 3</option>
    34. <option value="4">item 4</option>
    35. </select>
    36. </td>
    37. <td>
    38. <select name="rechts" size="10">
    39. <option value="1">item 1</option>
    40. <option value="2">item 2</option>
    41. <option value="3">item 3</option>
    42. <option value="4">item 4</option>
    43. </select>
    44. </td>
    45. </tr>
    46. </table>
    48. <div>
    49. <input type="submit" />
    50. </div>
    51. </form>
    53. </body></html>
    Alles anzeigen


    script.js

    Quellcode

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


    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.
    Bilder

    • auswahloptionen-zwischen-listen-verschieben.png

      3,81 kB, 413×181, 654 mal angesehen

    9.469 mal gelesen