如何使我的下拉選項按其值改變我的總數，但除非選中，否則不會計算

Question

我怎樣才能使我的下拉選項按其值改變我的總數，但除非被選中，否則不會計算？

這就是我得到的。 任何幫助都感激不盡。

我想4PC的下拉不做任何改變6PC會增加2.00到價格而12PC會增加4.00

我不確定我做錯了什么，有人請指出我，謝謝。

這是我的表格代碼

 function multiply() { a = Number(document.getElementById('QTY').value); b = Number(document.getElementById('PPRICE').value); c = Number(document.getElementById('4PC').value); d = Number(document.getElementById('4PCM').value); e = Number(document.getElementById('6PC').value); f = Number(document.getElementById('6PCM').value); g = Number(document.getElementById('12PC').value); h = Number(document.getElementById('12PCM').value); i = a * b + c * d + e * f + g * h; j = Number(document.getElementById('SALESTAX').value); k = i * j; l = Number(document.getElementById('TAXDIV').value); m = k / l; n = i + m; document.getElementById('SUBTOTAL').value = i; document.getElementById('TAX').value = m; document.getElementById('TOTAL').value = n; } 

 <table> <tr style="background-color:black; color:white" > <th>Menu Item</th> <th>Quantity</th> <th>Price</th> <th>Preferance</th> </tr> <tr> <td>Boneless Chicken Wings</td> <td><input type="text" value="" name="QTY" id="QTY" onKeyUp="multiply()" /></td> <td><input type="text" name="PPRICE" id="PPRICE" value="5.99" disabled="disabled" readonly/></td> </td> <td> <form action="/action_page.php"> <select id="BONELESS_COUNT"> <option value="0.00" name="4PC" id="4PC">4 Piece $5.99</option> <option value="2.00" name="6PC" id="6PC">6 Piece $7.99</option> <option value="4.00" name="12PC" id="12PC">12 Piece $9.99</option> </select> <select name="Preparation"> <option value="Baked">Baked</option> <option value="Fried">Fried</option> </select> <select name="Flavor"> <option>Original</option> <option>Buffalo</option> <option>Parmesian</option> <option>Lemon Pepper</option> <option>BBQ</option> </select> </form> </td> </tr> <tr> <td></td> <td><input type="text" name="4PCM" id="4PCM" value="1" disabled="disabled" style="display:none"readonly/></td> <td><input type="text" name="6PCM" id="6PCM" value="1" disabled="disabled" style="display:none"readonly/></td> <td><input type="text" name="12PCM" id="12PCM" value="1" disabled="disabled" style="display:none"readonly/></td> <td><input type="text" name="TAXDIV" id="TAXDIV" value="100" disabled="disabled" style="display:none"readonly/></td> </tr> <tr> <td></td> <td align="right"><strong>Subtotal $</strong></td> <td><input type="text" name="SUBTOTAL" id="SUBTOTAL"></td> <td></td> </tr> <tr> <td></td> <td align="right" style="display:none"><strong>Salestax</strong></td> <td><input type="text"name="SALESTAX" id="SALESTAX" value="11" disabled="disabled" style="display:none" readonly/></td> <td></td> </tr> <tr> <td></td> <td align="right"><strong>Tax $</strong></td> <td><input type="text" name="TAX" id="TAX" /></td> <td></td> </tr> <td></td> <td></td> <tr> <td></td> <td align="right"><strong>Total $</strong></td> <td><input type="text" name="TOTAL" id="TOTAL"></td> <td></td> </tr> </table> 

Answer 1

從你的問題和你的代碼中你並不完全清楚你所要求的（通常建議提供一個最小的，完整的，可驗證的例子來引發stackoverflow的好答案）。

您似乎想知道如何讓您的程序響應下拉列表中的更改，因此我將嘗試使用比您的代碼更簡單的示例來回答這個問題。

首先，對<select>下拉列表的更改會觸發onchange事件，因此您需要附加響應此事件的事件偵聽器。

其次，從<select>下拉列表中獲取所選值比從<input>元素獲取當前值更為復雜：您需要訪問.selectedIndex屬性以獲取當前所選選項的索引號，然后訪問從下拉列表的.options屬性更正索引。

下面的代碼片段演示了一個更簡單的示例。 如果您對“數量”輸入進行更改或在下拉列表中進行選擇，則會觸發update()函數，該函數會更新總計。

 function update() { var total = document.getElementById('TOTAL'), qty = document.getElementById('QTY'), choice = document.getElementById('ITEM'); total.value = (choice.options[choice.selectedIndex].value * qty.value) .toFixed(2); } 

 th{text-align: left;} 

 <table> <tr> <th>Choose item</th> <th>Quantity</th> <th>Total</th> </tr> <tr> <td> <select id="ITEM" onkeyup="update()" onchange="update()"> <option value="5.99" name="4PC" id="4PC">4 Piece $5.99</option> <option value="7.99" name="6PC" id="6PC">6 Piece $7.99</option> <option value="9.99" name="12PC" id="12PC">12 Piece $9.99</option> </select> </td> <td> <input type="text" id="QTY" onkeyup="update()" /> </td> <td> <input type="text"id="TOTAL"> </td> </tr> </table>