jqueryでのドロップダウン選択値の合計を求める

Question

ユーザーがサービスの量を選択できるようにフォームを作成してから、合計が表示されます。私はそれが1つのドロップダウンメニューサービスの稼働している合計を保つことができる場所に働いているが、他のドロップダウンメニューから追加のサービスを追加する方法を理解できない。たとえば、誰かが1つのドロップダウンメニューから「3」を選択した場合、その値に10を掛けて（その部分を完了しています）、次のドロップダウンから「4」を選択できるようにしますメニューと時間を値で表示し、合計を表示します。

フィドル：https://jsfiddle.net/7jrch7w6/

私はJavaScriptやjQueryのに非常に新しいですので、あなたがより良い方法や自分のコードがゴミである場合を参照してください場合は提案を与えること自由に感じ。ありがとう！

ここに私のコードです：

<form> 
<div id="carpet-services"> 
       <div class="form-group"> 
        <!--how many bedrooms--> 
        <label class="control-label" for="carpet_cleaning">Bedrooms</label> 
        <select class="form-control" id="carpet_cleaning"> 
         <option value="0-bedroom">0</option> 
         <option value="1-bedroom">1</option> 
         <option value="2-bedroom">2</option> 
        </select> 
        <label class="hide" for="0-bedroom">0</label> 
        <label class="hide" for="1-bedroom">1</label> 
        <label class="hide" for="2-bedroom">2</label> 
        <!--how many dining rooms--> 
        <label class="control-label" for="dining_rooms">Dining Rooms</label> 
        <select class="form-control" id="dining_rooms"> 
         <option value="0-diningRoom">0</option> 
         <option value="1-diningRoom">1</option> 
         <option value="2-diningRoom">2</option> 
        </select> 
        <label class="hide" for="0-diningRoom">0</label> 
        <label class="hide" for="1-diningRoom">1</label> 
        <label class="hide" for="2-diningRoom">2</label> 
    </div> 
    </div> 

    <h4>Total Price</h4> 
     <p id="output1"></p> 

JS

$("#carpet_cleaning").change(function() { 
    var bedrooms = $("#carpet_cleaning").val(); 
    var diningRooms = $("#dining_rooms").val(); 
    var bedroomPrice = ''; 
    var diningRoomPrice = ''; 

    if (carpet_cleaning){ 
     var bedroomsLabel = $("label[for="+bedrooms+"]").text(); 
     bedroomPrice = 'Your price quote is: ' + bedroomsLabel * 10; 
    } 

    $("#output1").text(bedroomPrice).fadeIn(); 
}); 

CSSの一行： label.hide {display: none;}

Answer 1

まず第一に、すべてのためにラベルを使用する必要はありませんドロップダウンオプション、それは何ですかvalue属性がためのものです：

<form> 
    <div id="carpet-services"> 
        <div class="form-group"> 
         <!--how many bedrooms--> 
         <label class="control-label" for="carpet_cleaning">Bedrooms</label> 
         <select class="form-control" id="carpet_cleaning"> 
          <option value="0">0</option> 
          <option value="1">1</option> 
          <option value="2">2</option> 
         </select> 
         <!--how many dining rooms--> 
         <label class="control-label" for="dining_rooms">Dining Rooms</label> 
         <select class="form-control" id="dining_rooms"> 
          <option value="0">0</option> 
          <option value="1">1</option> 
          <option value="2">2</option> 
         </select> 
     </div> 
     </div> 

     <h4>Total Price</h4> 
      <p id="output1"></p> 
    </form> 

計算は現在、簡素化され、適切に両方のドロップダウンのchangeイベントにフックアップすることができます。

$("#carpet_cleaning,#dining_rooms").change(function() { 
     var bedrooms = $("#carpet_cleaning").val(); 
     var diningRooms = $("#dining_rooms").val(); 

     var total = bedrooms * 10 + diningRooms * 20; 
     var totalPrice = 'Your price quote is: ' + total; 

     $("#output1").text(totalPrice).fadeIn(); 
}); 

Answer 2

私はあなたの質問を得た場合、私は知らないが、することができます$("#carpet_cleaning option:selected").val()を使用して、選択したコンポーネントで現在選択されている値を取得します。

フィドル：先端のためのhttps://jsfiddle.net/7jrch7w6/4/

$("#carpet_cleaning").change(function() { 
    UpdateResult(); 
}); 

$("#dining_rooms").change(function() { 
    UpdateResult(); 
}); 

function UpdateResult() 
{ 
    var result = 'Your price quote is: ' + (($("#carpet_cleaning option:selected").val() * 10) + ($("#dining_rooms option:selected").val() * 20)) 
    $("#output1").text(result).fadeIn(); 
}