Number feld von Select abhängig machen

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

  • 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:

    Source Code

    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:

    Source Code

    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:

    Source Code

    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>
    Display All



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