Platz jquery Ergebnis in einem Eingabefeld

Question

Ich bin derzeit das Ergebnis einer Berechnung zu einem <p> Element zuweisen, und ich möchte die gleiche Zuordnung zu einem Eingabefeld machen.

Hier ist mein Code.

HTML

<select id="selector" onChange="Expedisi(this);"> 
      <option>Select product</option> 
      <optgroup label="Sedan"> 
      <option value="Lancer EX">Lancer EX 1.6/2.0</option> 
      <option value="Lancer EX GT">Lancer EX GT</option> 
      <optgroup label="Sport"> 
      <option value="Lancer Evolution X">Lancer Evolution X</option> 
      <optgroup label="SUV"> 
      <option value="Outlander">Outlander</option> 
     </select> 

<p id="thetotal"> </p> 

JavaScript

$('#selector').on('change', function() { 
    total = data[$(this).val()].price; 

    $('#thetotal').text("" + total); 
}) 

Der change Handler wird die Zuordnung tun, basierend auf welche Option hat im #selector Element ausgewählt wurde. Ich weiß, wie man den Wert der ausgewählten Option abruft und wie man die total berechnet, da ich dies bereits einem Element <p> zuweise.

Wie weise ich einem Element input denselben Wert zu? Ich muss nur wissen, mit welcher jQuery-Methode der Wert des Eingabeelements festgelegt wird.

Answer 1

Sie in Ihrem jQuery-Code ganz in der Nähe waren. Um den Inhalt eines Texteingabefeldes festzulegen, verwenden Sie die Methode .val(). Mit dieser, würde der Code wie folgt aussehen:

$('#selector').on('change', function() { 
    var total = data[$(this).val()].price; 

    $('#thetotal').val("" + total); 
}); 

Zwei weitere Verbesserungen hier gemacht wurden, falls sie in den eigentlichen Code existierte:

• Added var zum total variable Zuordnung, so dass wird der Code nicht versehentlich erstellen (oder noch schlimmer, überschreibt) eine globale Variable
• Added ein ; am Ende des Codes, nachdem das Event-Handler Callback-Registrierung

Die Zuweisung von total setzt voraus, dass es eine Variable mit dem Namen data im Bereich gibt, und diese Variable hat Mitglieder mit Werten, die den Optionen in #selector entsprechen. Das bedeutet, dass data etwas würde wie folgt aussehen:

var data = { 
    "Lancer EX": { price: 17995 }, 
    "Lancer EX GT": { price: 21873 }, 
    "Lancer Evolution X": { price: 26434 }, 
    "Outlander": { price: 21659 } 
}; 

Diese Daten können vollständig auf die Datenstruktur aus basiert, so verlassen sich nicht auf sie für etwas anderes als den Code zu verstehen. Du wurdest gewarnt.

Answer 2

Wenn Sie die Summe in einem Eingabefeld angezeigt werden sollen, setzen Sie einfach diesen Code in Ihrem onchange Rückruf:

var input = document.querySelector('input'); // your input field 
input.value = total;