Number feld von Select abhängig machen

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

  • Number feld von Select abhängig machen

    Hallo Leute, ich hab da ein kleines Problem.
    Ich hab in einem Select mehrere Schulen aufgelistet, jetzt will ich ein number feld dahinter setzen das aber davon abhängig ist welche schule im Select feld gewählt wurde.
    Wie könnte ich das am besten anstellen?
    Danke schonmal im vorraus :)
  • Ich empfehle dir das ganze mit jQuery umzusetzen, da man mit diesem Framework sehr einfach und schnell solche kleinen Effekte in JavaScript umsetzen kannn. Wie du jQuery genau einbindest, findest du hier auf dieser Seite: docs.jquery.com/Tutorials:Getting_Started_with_jQuery

    Als erstes brauchst du deinen beiden HTML Felder:

    Quellcode

    1. <select name="school" class="school">
    2. <option value="1">Schule 1</option>
    3. <option value="2">Schule 2</option>
    4. <option value="3">Schule 3</option>
    5. </select>
    6. <input type="text" name="foobar" class="foobar" />


    Und anschließend dein jQuery Code:

    Quellcode

    1. $(document).ready(function() {
    2. $(".school").change(function() {
    3. if($("option:selected", this).val() == 1) {
    4. $(".foobar").val("... 1");
    5. }
    6. });
    7. });



    ... und zusammengebaut sieht das dann so aus:

    Quellcode

    1. <html>
    2. <head>
    3. <script type="text/javascript" src="jquery.js"></script>
    4. <script type="text/javascript">
    5. $(document).ready(function() {
    6. $(".school").change(function() {
    7. if($("option:selected", this).val() == 1) {
    8. $(".foobar").val("... 1");
    9. }
    10. });
    11. });
    12. </script>
    13. </head>
    14. <body>
    15. <select name="school" class="school">
    16. <option>Bitte wählen</option>
    17. <option value="1">Schule 1</option>
    18. <option value="2">Schule 2</option>
    19. <option value="3">Schule 3</option>
    20. </select>
    21. <br />
    22. <input type="text" name="foobar" class="foobar" />
    23. </body>
    24. </html>
    Alles anzeigen



    Ich hoffe ich konnte dir damit ein wenig helfen. Du musst das ganze natürlich noch an deine Bedürfnisse anpassen.