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

【问题标题】：Find total of dropdown selection values with jquery使用 jquery 查找下拉选择值的总数
【发布时间】：2017-04-04 20:42:31
【问题描述】：

我正在创建一个表单，允许用户选择一定数量的服务，然后显示总数。我让它可以保持一个下拉菜单服务的运行总数，但是我不知道如何从其他下拉菜单中添加其他服务。例如，我需要它，以便如果有人从一个下拉菜单中选择“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>

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

【问题讨论】：

标签： javascript jquery html css drop-down-menu

【解决方案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();
});

【讨论】：

感谢您的提示。就像我说的，我是新手，所以非常感谢您的反馈

【解决方案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();
}

【讨论】：