affichage forme en temps réel plus

Question

J'ai une forme qui a deux listes de sélection:

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

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

J'ai essayé de créer un script qui ajouterait les deux valeurs sélectionnées, donc par exemple si un utilisateur a sélectionné 1 pour note 1, et 2 pour la note 2, "Total de la catégorie: 3" serait affiché à la tête de la table. Ce script est le suivant:

<p><script> 

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

Il semble que cela devrait fonctionner, mais qu'est-ce que je fais mal? Merci!

Answer 1

La balise script est étrangement imbriquée dans la balise p. Assurez-vous également que le DOM est chargé avant d'essayer d'attacher des gestionnaires aux éléments.

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

Voici un demo. Remarque: Le $(document).ready n'est pas nécessaire si ce script est situé après la déclaration select.