下拉价格更新

Question

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

代码：

<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，因为 [=16= 的值] 不包含任何 HTML.

此外，您不应在文档准备就绪时触发 change 功能，因为用户将永远无法以这种方式查看和使用下拉列表。

最后，将 "dummy" 选项作为默认选项添加到列表中，以便用户必须更改值才能从列表中 select "Personal License"。没有这个，更改事件将不会触发，因为那是一开始的默认选择。

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>

下拉价格更新

Drop down price update

javascript

drop-down-menu

price