JavaScript: Auswahloptionen zwischen Listen verschieben

This site uses cookies. By continuing to browse this site, you are agreeing to our Cookie Policy.

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

    Code

    index.html

    Source Code

    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')">
    16. <form method="post" action="" id="ajaxSelect">
    17. <table>
    18. <tr>
    19. <td>Liste Links</td>
    20. <td rowspan="2">
    21. <input type="submit" name="link_rechts" value="&raquo;" onclick="return moveOption(this.form.links, this.form.rechts)"/><br/>
    22. <input type="submit" name="link_rechts" value="&laquo;" onclick="return moveOption(this.form.rechts, this.form.links)"/><br/>
    23. </td>
    24. <td>Liste Rechts</td>
    25. </tr>
    26. <tr>
    27. <td>
    28. <select name="links" size="10">
    29. <option value="1">item 1</option>
    30. <option value="2">item 2</option>
    31. <option value="3">item 3</option>
    32. <option value="4">item 4</option>
    33. </select>
    34. </td>
    35. <td>
    36. <select name="rechts" size="10">
    37. <option value="1">item 1</option>
    38. <option value="2">item 2</option>
    39. <option value="3">item 3</option>
    40. <option value="4">item 4</option>
    41. </select>
    42. </td>
    43. </tr>
    44. </table>
    45. <div>
    46. <input type="submit" />
    47. </div>
    48. </form>
    49. </body></html>
    Display All


    script.js

    Source Code

    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.
    Images
    • auswahloptionen-zwischen-listen-verschieben.png

      3.81 kB, 413×181, viewed 341 times

    4,807 times viewed