ドロップダウン価格の更新

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あるべきとselectの値は、任意のHTMLを含んでいないので、率直に言って、あなたはおそらく、とにかく、この場合にinnerHTMLの代わりにtextContentを使用する必要があります。

また、ユーザーがドロップダウンリストをこのようにして使用することがないため、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>