JSとはどのように2つの異なる形式ですか？

Question

私は、コードの合計は、オプションを選択した：私は別のフォームを追加し、他の選択されたオプションの合計を行いたい

function validate(){ 
    var $selected = $('#mark, #series').children(":selected"); 
    var sum = 0; 

    $selected.each(function() { 
    sum += $(this).data('price') || 0; 
    }); 

    $('#total').html(sum === 0 ? '' : sum + '$'); 
} 
validate(); 

$('#mark, #series').on('change', function() { 
    validate(); 
}); 


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<form> 
<select id="mark" name="mark"> 
      <option value="">--</option> 
      <option value="bmw" data-price="200">bmw</option> 
      <option value="audi" data-price="400">audi</option> 
     </select> 

<select id="series" name="series"> 
      <option value="">--</option> 
      <option value="series-1" data-price="2000" >3 series</option> 
      <option value="series-1" data-price="3000" >5 series</option> 
     </select> 

<div id="total"> </div> 
</form> 

を。この行を編集して、他のForm2をfrorをForm1とjsの他のコードのための1つのjsのコードの作業を行う方法

function validate(){ 

Answer 1

ここでの問題は、あなたのvalidate()機能が固定select要素のセット（#markを読み取っていることで、 ＃シリーズ）。追加の要素を読みたい場合は、validate関数を変更して新しい要素を追加するか（推奨しません！）、select要素の特定のIDから独立させる必要があります。CSSクラスを使用して、合計する要素を取得しますそれらのIDの代わりに。ここ

は一例であり：

function validate() { 
 
    var $selected = $('.sum-item').children(":selected"); 
 
    var sum = 0; 
 

 
    $selected.each(function() { 
 
    sum += $(this).data('price') || 0; 
 
    }); 
 

 
    $('#total').html(sum === 0 ? '' : sum + '$'); 
 
} 
 
validate(); 
 

 
$('.sum-item').on('change', function() { 
 
    validate(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <select id="mark" name="mark" class="sum-item"> 
 
      <option value="">--</option> 
 
      <option value="bmw" data-price="200">bmw</option> 
 
      <option value="audi" data-price="400">audi</option> 
 
     </select> 
 

 
    <select id="series" name="series" class="sum-item"> 
 
      <option value="">--</option> 
 
      <option value="series-1" data-price="2000" >3 series</option> 
 
      <option value="series-1" data-price="3000" >5 series</option> 
 
     </select> 
 

 
    <select id="other" name="series" class="sum-item"> 
 
      <option value="">--</option> 
 
      <option value="type-a" data-price="10" >Type A</option> 
 
      <option value="type-b" data-price="20" >Type B</option> 
 
      <option value="type-c" data-price="30" >Type C</option> 
 
     </select> 
 

 
    <div id="total"> </div> 
 
</form>