Javascript onselect Änderungspreis

Question

Ich versuche, den Preis eines Produkts zu aktualisieren, wenn der Benutzer ein optionales Extra mit einer Dropdown-Box auswählt. Es soll das versteckte Feld sowie das H1-Tag aktualisieren, das dem Benutzer den neuen Preis anzeigt. Es scheint nicht zu funktionieren. Hier

function xDeckIncreasePrice(price) { 
var total = document.getElementById("agreedPrice").value; 
var newprice = Number(total) + Number(price); 
document.getElementById("mixingDeckTotal").innerHTML = "£" + newprice + ""; 
document.getElementById("agreedPrice").value = "£" + newprice + ""; 
} 

ist die HTML:

<select name="size"> 
    <option value="6inch">6 Inch</option> 
    <option value="footlong" onselect="xDeckIncreasePrice('2.50')">Footlong (+£2.50)</option> 
</select> 

Und hier sind die Elemente aktualisiert werden:

<h1 style="color:red;" id="mixingDeckTotal">£4.50</h1><p> 
<input type="hidden" id="agreedPrice" value="£4.50"> 

Answer 1

Neben dem Einsatz von £ in den Preisen, die nicht für Zahlen arbeiten In JavaScript unterstützt <option> Tag keine onselect Ereignis. Sie sollten <select> 's onchange Ereignis dafür verwenden.

ähnliche Frage: How to use onClick() or onSelect() on option tag in a JSP page?

Answer 2

Sie sollten sich die onselect Veranstaltung zu einem Ereignisse onchange auf dem tatsächlichen select Element ändern. Sie sollten auch die Auswahloptionen ändern, um einen Wert des Preises zu erhalten, den die Option darstellt. Dann sollten Sie das von Ihnen aufgerufene Ereignis ändern, um den Text auf den Wert der ausgewählten Option zu setzen.

function xDeckChangePrice(element) { 
 
    document.getElementById("mixingDeckTotal").innerHTML = "£" + element.value + ""; 
 
}

<select name="size" onchange="xDeckChangePrice(this)"> 
 
    <option value="4.5">6 Inch</option> 
 
    <option value="7">Footlong (+£2.50)</option> 
 
</select> 
 

 
<h1 style="color:red;" id="mixingDeckTotal">£4.50</h1>