Question

我正在创建一个表单，允许用户选择一定数量的服务，然后显示总计。我已经开始工作，我可以保持一个下拉菜单服务的运行总数，但是我无法弄清楚如何从其他下拉菜单添加其他服务。例如，我需要它，以便有人选择＆＃39; 3＆＃39;从一个下拉菜单中，它会将该值乘以10（我已完成该部分），但随后也可以选择一个＆＃39; 4＆＃39;从下一个下拉菜单中按时间按值，然后显示总计。

小提琴：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

我不知道我是否收到您的问题，但您可以使用lazy-init="false"获取选择组件中的当前所选值。

小提琴：https://jsfiddle.net/7jrch7w6/4/

lazy-init="false"

使用jquery

2 个答案: