下拉价格更新答案

【问题标题】：Drop down price update下拉价格更新
【发布时间】：2017-01-30 19:38:12
【问题描述】：

我正在尝试构建一个让人们选择许可证的应用程序，并且不同许可证的价格不同。我想在产品页面上实时更新价格。以下是我对以下代码的参考：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>

提前致谢。 ;)

【问题讨论】：

那么，您的问题是什么？而且，您如何使用适当的缩进重新格式化问题中的代码？
innerHtml 应该是 innerHTML，坦率地说，在这种情况下，您可能应该使用 textContent 而不是 innerHTML。

标签： javascript drop-down-menu price

【解决方案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>

【讨论】：