降價更新

Question

我正在嘗試構建一個讓人們選擇許可證的應用程序，並且不同許可證的價格不同。 我想在產品頁面上實時更新價格。 這是我為以下代碼采用的參考： https : //stackoverflow.com/a/6740218

代碼：

 <script type="text/javaScript"> var price = {"3":"11","2":"500","1":"1000"}; $(function() { $('select[name=dropdown_price_change]').change(function() { document.getElementById('price_disp').innerHTML = price[$(this).val()]; }); // Trigger on dom ready $('select[name=dropdown_price_change]').change(); }); </script>

 <div class="product-price" id="price_disp"> <form class="cart nobottommargin clearfix" method="get"> <div class="quantity clearfix"> <select id="dropdown_price_change" name="dropdown_price_change" class="form-control"> <option value="3">Personal License</option> <option value="2">Small Firm License</option> <option value="1">Enterprise or Developer License</option> </select> </div> </form> </div>

提前致謝。 ;)

Answer 1

innerHtml應該是innerHTML ，坦率地說，在這種情況下，您可能應該使用textContent而不是innerHTML ，因為select的值不包含任何HTML。

此外，您不應在文檔就緒時觸發change功能，因為用戶將永遠無法以這種方式查看和使用下拉列表。

最后，在列表中添加一個“虛擬”選項作為默認選項，這樣用戶如果想從列表中選擇“個人許可證”就必須更改該值。 沒有這個，更改事件將不會觸發，因為這是首先的默認選擇。

 var price = {"3":"11","2":"500","1":"1000"}; $(function(){ $('select[name=dropdown_price_change]').change(function(){ document.getElementById('price_disp').textContent = price[$(this).val()]; }); });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="product-price" id="price_disp"> <form class="cart nobottommargin clearfix" method="get"> <div class="quantity clearfix"> <select id="dropdown_price_change" name="dropdown_price_change" class="form-control"> <option value="">-- Select an Option --</option> <option value="3">Personal License</option> <option value="2">Small Firm License</option> <option value="1">Enterprise or Developer License</option> </select> </div> </form> </div>