Question sur les calculs jquery

Question

J'ai ce code :

<div>
    <input id="number" type="text" />

    <select id="Selection" name="D1"> 
    <option>Plus 1</option>
    <option>Minus 1</option>
    </select>

    <input id="result" type="text" />
    </div>

Comment puis-je calculer un nombre quelconque saisi dans l'entrée "nombre" en fonction de la valeur choisie dans le contrôle de sélection en utilisant jQuery ? Par exemple, je voudrais saisir 5 dans l'entrée "nombre" et, si je choisis "Plus 1", ajouter 1 au nombre et afficher le résultat dans l'entrée "résultat". Si je choisis "Moins 1", je ferai une soustraction et j'afficherai le nouveau résultat. Merci.

Answer 1

Vous pouvez le faire comme ça :

$('#Selection').change(calc); //update result when changing the number
$("#number").keyup(calc);     //update result when select changes

function calc() {
  $('#result').val(
    parseInt($('#number').val(), 10) + parseInt($("#Selection").val(), 10)
  );
}

Essayez-le ici la partie la plus importante est le parseInt() votre entrée (vous devriez également ajouter un filtre pour les chiffres uniquement, etc. .val() à partir de l'une ou l'autre des entrées est une chaîne, pensez-y de cette façon :

• 1 + 1 == 2
• "1" + "1" = "11"

Answer 2

<div>
    <input id="number" type="text" />

    <select id="Selection" name="D1"> 
        <option value="1">Plus 1</option>
        <option value="-1">Minus 1</option>
    </select>

    <input id="result" type="text" />
</div>

$('#Selection').change(function() {
   $('#result').val(parseInt($('#number').val(),10) + parseInt($(this).val(),10));
})

EDIT : oui, les commentaires sont corrects, et j'ai modifié le code pour refléter cela.

Answer 3

<option value="minus">
<option value="plus">

si le .val() de l'élément est "moins", alors faites x, si c'est plus, faites y, etc.

Answer 4

Si vous voulez soutenir mieux que l'addition et la soustraction, vous pouvez le faire en tant que eval() si vous faites attention à la façon dont les données entrent dans #number :

<input id="number" />
<select id="Selection">
    <option value="+1">Plus 1</option>
    <option value="-1">Minus 1</option>
    <option value="*2">Times 2</option>
</select>
<input id="result"/>
<input type="button" onclick="$('#result').val(  eval($('#number').val() + $('#Selection').val()); );" value="Calculate" />

Ne laissez pas les données d'URL ou de FORM être fournies comme valeur par défaut pour les nombres, sinon vous vous exposez à une vulnérabilité de type cross-site scripting (XSS).