Question

我的代码如下：

        <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') }}">

每次对任何选择或word_count文本输入进行更改时，我都希望更新总价格，该总价格存储在id = current_price_too的div中。我将如何在jquery中执行此操作？

Answer 1

您只需要处理类似于此的选择更改事件：

＆＃13;

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)
});

＆＃13;

<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>

＆＃13;

jquery多选和文本输入如何更新价格？

1 个答案: