数量で価格を計算してください

Question

私は従業員用のウェブページを用意しています。ドロップダウンからアイテムを選択し、そのアイテムの価格を自動的に入力します。ここに私のコードは次のとおりです。

<script> 
$(document).ready(function() { 

    $('#price_input').on('change', function() { 
    $selection = $(this).find(':selected'); 
    $('#opt_value').val($selection.val()); 
    $('#opt_price').val($selection.data('price')); 
    }); 
}); 
</script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<select id="price_input"> 
    <option value="Coffee" data-price="3.00">Coffee</option> 
    <option value="Chips" data-price="0.75">Chips</option> 
    <option value="Soda" data-price="2.50">Soda</option> 
</select> 
<div>Option Value <input type="text" id="opt_value"/></div> 
<div>Option Price <input type="text" id="opt_price"/></div> 

コードが正常に動作しますが、どのように私は1デフォルトは、それが2に変更され、価格が倍増し、そのままでは、に変更されていることを数量入力を追加することができるだろうたとえば「オプション価格」入力の3つの価格トリプルを入力します。

Answer 1

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
<script> 
$(document).ready(function() { 

    $('#price_input').on('change', function() { 
    $selection = $(this).find(':selected'); 
    $('#opt_value').val($selection.val()); 
    $('#opt_price').val($selection.data('price')); 
    $('#quantity_input').on('change', function() { 
     $('#opt_price').val($selection.data('price') * $(this).val()); 
    }); 
    }); 
}); 
</script> 

<select id="price_input"> 
    <option value="Coffee" data-price="3.00">Coffee</option> 
    <option value="Chips" data-price="0.75">Chips</option> 
    <option value="Soda" data-price="2.50">Soda</option> 
</select> 
<select id="quantity_input"> 
    <option value="1" >1</option> 
    <option value="2" >2</option> 
    <option value="3" >3</option> 
</select> 
<div>Option Value <input type="text" id="opt_value"/></div> 
<div>Option Price <input type="text" id="opt_price"/></div> 

計算は、デフォルト値の場合と同様に、変更上で動作し、あなたがその部分を把握することができます両方を監視します。数量ドロップダウン機能の変更を開始する必要があります。

Answer 2

var select = $("#opt"); 
var price = $("input#opt_price"); 
var quantity = $("input#opt_quantity"); 

var onChangeSelect = function() { 
    price.val(select.children(":selected").data('price')); 
    quantity.val(1); 
} 

select.on('change', onChangeSelect); 
quantity.on('change', function() { 
    price.val(select.children(':selected').data('price') * $(this).val()); 
}); 

onChangeSelect(); 

更新