降价更新

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>