jquery複数選択とテキスト入力価格の更新方法は？

Question

次のようにIコードを持っている：

 <input type="hidden" id="a_grade_price" value="0.068"> 
     <input type="hidden" id="b_grade_price" value="0.020"> 
     <input type="hidden" id="c_grade_price" value="0.016"> 
     <input type="hidden" id="d_grade_price" value="0.012"> 
     <input type="hidden" id="processing_fee" value="0.25"> 

     <select id="article_level_1" class="form-control font-open-sans-light" name="article_level_1"> 
     <option value="A">Grade A</option> 
     <option value="B">Grade B</option> 
     <option value="C">Grade C</option> 
     <option value="D">Grade D</option> 
     </select>         
     <input type="text" class="form-control font-open-sans-light" id="word_count_1" name="word_count_1" value="{{ old('word_count_1') }}"> 

     <select id="article_level_2" class="form-control font-open-sans-light" name="article_level_2"> 
     <option value="A">Grade A</option> 
     <option value="B">Grade B</option> 
     <option value="C">Grade C</option> 
     <option value="D">Grade D</option> 
     </select>         
     <input type="text" class="form-control font-open-sans-light" id="word_count_2" name="word_count_2" value="{{ old('word_count_2') }}"> 

     <select id="article_level_3" class="form-control font-open-sans-light" name="article_level_3"> 
     <option value="A">Grade A</option> 
     <option value="B">Grade B</option> 
     <option value="C">Grade C</option> 
     <option value="D">Grade D</option> 
     </select>         
     <input type="text" class="form-control font-open-sans-light" id="word_count_3" name="word_count_3" value="{{ old('word_count_3') }}"> 

選択または単語数のテキスト入力のいずれかに変更があるたびに、私は、ID = current_price_tooとDIVに格納されている合計金額を更新するwantg。 jqueryでこれをどうやって行うのですか？

Answer 1

あなたはこれに似選択変更イベントを処理する必要があります。

var prices = { 
 
    "A": 0.068, 
 
    "B": 0.020, 
 
    "C": 0.016, 
 
    "D": 0.012, 
 
    "processing": 0.25 
 
} 
 
$('select').on('change', function() { 
 
    var totalCost = prices.processing 
 
    $('select').each(function(index) { 
 
    totalCost += prices[$(this).val()] 
 
    }) 
 
    $('#current_price_too').text(totalCost) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="hidden" id="a_grade_price" value="0.068"> 
 
<input type="hidden" id="b_grade_price" value="0.020"> 
 
<input type="hidden" id="c_grade_price" value="0.016"> 
 
<input type="hidden" id="d_grade_price" value="0.012"> 
 
<input type="hidden" id="processing_fee" value="0.25"> 
 

 
<select id="article_level_1" class="form-control font-open-sans-light" name="article_level_1"> 
 
    <option value="A">Grade A</option> 
 
    <option value="B">Grade B</option> 
 
    <option value="C">Grade C</option> 
 
    <option value="D">Grade D</option> 
 
</select> 
 
<input type="text" class="form-control font-open-sans-light" id="word_count_1" name="word_count_1" value="{{ old('word_count_1') }}"> 
 

 
<select id="article_level_2" class="form-control font-open-sans-light" name="article_level_2"> 
 
    <option value="A">Grade A</option> 
 
    <option value="B">Grade B</option> 
 
    <option value="C">Grade C</option> 
 
    <option value="D">Grade D</option> 
 
</select> 
 
<input type="text" class="form-control font-open-sans-light" id="word_count_2" name="word_count_2" value="{{ old('word_count_2') }}"> 
 

 
<select id="article_level_3" class="form-control font-open-sans-light" name="article_level_3"> 
 
    <option value="A">Grade A</option> 
 
    <option value="B">Grade B</option> 
 
    <option value="C">Grade C</option> 
 
    <option value="D">Grade D</option> 
 
</select> 
 
<input type="text" class="form-control font-open-sans-light" id="word_count_3" name="word_count_3" value="{{ old('word_count_3') }}"> 
 

 
<div id="current_price_too"></div>

Answer 2

• var。
• On change of select（#select option:selected）はオプション値を取得します。すべて一緒で$("#current_price_too").text("The total price is: $"+total_price);

がこれを置くために、既存のスキルを使用 -

は

が希望のdivにそれを表示
var newVal = $("#"+selected_val.toLowerCase()+"_grade_price").val()

合計価格に新しい価格を追加し、あなたの隠された入力フィールドから対応する値を取得します。あなたのコード。