Остановить снижение цены

Question

Я пытаюсь создать приложение, которое позволяет людям выбирать лицензию, а цена отличается для разных лицензий. Я хочу обновление цены в реальном времени на странице продукта. Вот ссылка, что я взял на код ниже: https://stackoverflow.com/a/6740218

Код:

<script type="text/javaScript"> 
 
    var price = {"3":"11","2":"500","1":"1000"}; 
 
\t $(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>

Спасибо заранее. ;)

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>