多个选择乘以输入值jQuery

时间:2013-07-29 11:00:19

标签: jquery

我开始学习jQuery,需要一点帮助才能指出正确的方向。

我正在尝试制作一个具有多个下拉选项的成本计算器,如果选中它将乘以输入框中的数字。

e.g。公司一个服务的每单位成本为1.0,两个服务1.5和三个服务2.0。这需要乘以输入中的单位数和下面div中显示的总数。

我的HTML位于

之下
<form>
    <div>
        <label>Company</label>
        <p>
            <select class="dropbox" id="comapny">
                <option value="Select">Select</option>
                <option value="1">Company one</option>
                <option value="2">Company two</option>
            </select>
            </div>
            <div>
                <label>Service</label>
                <p>
                    <select class="dropbox" id="service">
                        <option value="Select">Select</option>
                        <option value="1">One service</option>
                        <option value="2">Two service</option>
                        <option value="3">Three service</option>
                    </select>
                    <p>
                        </div>
                          <div>
                            <label>Unit</label>
                            <p>
                                <input id="unit"></input>
                                <p>
                                    </div>
                                   <div>
                                        <label>Reduction</label>
                                        <p>
                                            <select class="dropbox">
                                                <option value="Select">Select</option>
                                                <option value="Yes ">Yes</option>
                                                <option value="No">No</option>
                                            </select>
                                           </div> 
                                           </form>
                                            <p>
                                                <div>bill amount updated here</div>

我的代码(简直就像它需要的一样)

$(.dropbox).on('change', function() {
var comapny = "",
    service = "",
    unit = .val,


$.each(function() {

});

var sum = service * unit = toal 

});

jsFiddle

关于我应该如何处理这个以及我将需要学习什么功能的任何建议都将非常感激。 我已经阅读了使用parseInt和var但我真的在努力将它们整合在一起。

非常感谢提前提供的任何帮助。

1 个答案:

答案 0 :(得分:0)

这样的事情怎么样:

$(document).ready(function() {
   $(".dropbox").on("change", function() {
      var unit = $("#unit").val();
      if (unit != "")
          alert($(this).val() * unit);
   });
});

如果您没有填充Unit文本框,那么我也会考虑将其附加到文本框更改,以便在输入值时更新。

这应该为您提供足够的信息以适应您的需求。

关键是$("#unit").val();。这将根据ID(#)或类(.)从关联的输入/下拉等中获取值。例如,要获得公司价值,您可以使用:$("#comapny").val();

Fiddle Example