用jquery查找下拉选择值的总数

Question

我正在创建一个表单，允许用户选择一定数量的服务，然后显示一个总数。我一直在努力在哪里可以保持一个下拉菜单服务的运行总数，但是我无法弄清楚如何从其他下拉菜单添加其他服务。例如，我需要它，以便如果某人从一个下拉菜单中选择'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 CSS的

$("#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(); 
}); 

一号线： 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(); 
}