[英]Change result input based on dropdown option - jQuery + HTML
我正在尝试使用HTML和jQuery构建计算器。 到目前为止,我有:
HTML
<form accept-charset="UTF-8" action="#" id="calc" method="post">
<div class="item-1">
<label for="item-1">Item 1</label>
<input class="income" id="item-1" size="50" />
<select id="select-item-1" class="select">
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
</select>
</div>
<div class="item-2">
<label for="item-2">Item 2</label>
<input class="income" id="item-2" size="50" />
<select id="select-item-2" class="select">
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
</select>
</div>
<div class="item-3">
<label for="item-3">Item 3</label>
<input class="income" id="item-3" size="50" />
<select id="select-item-3" class="select">
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
</select>
</div>
<hr />
<div class="grand-total">
<label for="grand-total">Total :</label>
<input id="grand-total" size="50" disabled />
<select id="grand-total-filter" class="select">
<option value="daily">Daily</option>
<option value="weekly">Weekly</option>
<option value="monthly">Monthly</option>
</select>
</div>
</form>
脚本
var $form = $('#calc'),
$summands = $form.find('.income'),
$sumDisplay = $('#grand-total');
$form.delegate('.income', 'change', function (){
var sum = 0;
$summands.each(function () {
var value = Number($(this).val());
if (!isNaN(value)) sum += value;
});
$sumDisplay.val(sum);
});
$("#grand-total-filter").change(function() {
var e = document.getElementById("grand-total-filter");
var strUser = e.options[e.selectedIndex].value;
if (strUser == 'monthly' ) {
// Monthly
} else if (strUser == 'weekly' ) {
// Weekly
} else {
// Default (Daily)
}
});
这是一个有效的jsFiddle以上位: http : //jsfiddle.net/4Q8Gh/1/
这个想法是最终用户应该能够添加任何选项(每日,每月,每周)的值(item1,item2和item3) - 单独 - 所以item1 / item2 / item3可以有任何选项(每日,每周,每月) )。
默认情况下,结果应显示在“每日”值中,结果输入可以再次通过以下任何选项进行过滤:每日,每周,每月。
例如,我们有:
这给了我们一个总计*:
*基于上述示例并考虑1周= 5个工作日和1个月= 4周
此时我迷失了,我不知道如何使用jQuery将这些想法转化为代码,所以任何帮助/指导都会非常感激。 提前感谢您的任何反馈!
PS如果我的方法因任何原因不正确,我会非常乐意听取您的建议。
创建1个执行完整计算的函数,然后将表单INPUT和SELECT更改事件委托给它。
function calculate() {
var sum = 0;
$("#calc").find("input.income").each(function() {
var val = parseFloat($(this).val());
if(!isNaN(val)) {
var unit = $("#select-" + this.id).val();
switch(unit) {
case "daily": sum += val; break;
case "weekly": sum += val / 5; break;
case "monthly": sum += val / (5 * 4); break;
default: break;
}
}
});
var unit = $("#grand-total-filter").val();
switch(unit) {
case "daily": sum *= 1; break;
case "weekly": sum *= 5; break;
case "monthly": sum *= (5 * 4); break;
default: break;
}
$("#grand-total").val(sum);
}
$("#calc").delegate("input.income", "change", calculate);
$("#calc").delegate("select.select", "change", calculate);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.