Anzeige in Echtzeit Form zusätzlich

Question

Ich habe ein Formular, das zwei Auswahllisten hat:

<select name="rating1" id="rating1"> 
    <option>1</option> 
    <option>2</option> 
</select> 

<select name="rating2" id="rating2"> 
    <option>1</option> 
    <option>2</option> 
</select> 

Ich habe versucht, ein Skript zu erstellen, das die beiden ausgewählten Werte hinzufügen würde, so zum Beispiel, wenn ein Benutzer 1 1 für die Bewertung ausgewählt, und 2 für die Bewertung 2, "Kategorie total: 3" würde am Tischkopf angezeigt werden. Dieses Skript ist wie folgt:

<p><script> 

    $("select").keyup(function() { 
     var add = parseInt($("#rating1").val())+ parseInt($("#rating2").val()); 
        $("p").html("Category Total: "+add+" "); 
    }).keyup(); 
</script></p> 

Es scheint wie es sollte funktionieren, aber was mache ich falsch? Danke!

Answer 1

Sie script Tag ist merkwürdig verschachtelt innerhalb der Tag. Stellen Sie außerdem sicher, dass das DOM geladen ist, bevor Sie versuchen, Handler an Elemente anzuhängen.

<script type="text/javascript"> 
    $(function() { 
     $("select").keyup(function() { 
      var add = parseInt($("#rating1").val()) + parseInt($("#rating2").val()); 
      $("p").html("Category Total: " + add + " "); 
     }).keyup(); 
    }); 
</script> 
<p></p> 

Hier ist ein demo.

Anmerkung: Die $(document).ready ist nicht erforderlich, wenn dieses Skript nach der select Deklaration liegt.