通过下拉菜单更改文本框中的默认数字 [英] Change default figures in textbox via dropdown

问题描述

我正在处理此页 - http://www.medilogicuk.com / v1 / products / calculate-savings /

这是一个计算储蓄的简单计算器。目前，药剂师&当用户点击下拉菜单并选择每小时时，分配器/技术人员输入是每年数字，我希望数字自动变为每小时（通过简单的计算）...反之亦然。输入需要（重新）计算用户输入的任何数字，所以如果他们输入50.00并更改为每年，则每年的数字需要反映该数字。

我可以执行这个吗？

以下是我创建该表的代码：

 < table BORDER = 0 > 
< tr> 
< td colspan =3>< h3>当前服务成本< / h3>< / td> 
< / tr> 
< tr> 
< td width =440>< p>药剂师< / p>< / td> 
< td>< p style =padding-left：5px！IMPORTANT;>& pound; 
< input value =42500type =textname =pharmacist/> 
< / p>< / td> 
< td width =5rowspan =2>< select> 
< option value =perannum> per year< / option> 
< option value =perhour> per hour< / option> 
< / select>< / td> 
< / tr> 
< tr> 
< td>< p>配药器/技师< / p>< / td> 
< td>< p style =padding-left：5px！IMPORTANT;>& pound; 
< input value =17500type =textname =dispenser/> 
< / p>< / td> 
< / tr> 
< tr> 
< td colspan =3>& nbsp;< / td> 
< / tr> 
< / table> 
  

解决方案

为您解决问题的解决方案： http://jsfiddle.net/tive/Gya43/

javascript

  $（function（）{
 $（'＃ddlDuration'）。 
 var pharmacist = $（'＃pharmacist'）; 
 var dispenser = $（'＃dispenser'）; 
 
 if（$（this）.val（）== 'tohour（dispenser.val（）））; 
} else {$ b（药剂师（toAnnual（pharmacist.val（）））; 
 dispenser.val（toAnnual（dispenser.val（）））; 
} 
}）; 
 
函数toHour（annumRate）{
 var num =（annumRate / 8760）; 
返回num.toPrecision（annumRate.length）; 
} 
 
函数toAnnual（hourRate）{
 var num =（hourRate * 8760）; 
返回num.toFixed（0）; 
} 
}）; 
  

如果遇到num.toFixed（2）的问题，请尝试num.toPrecision（2）将会更精确。

编辑：
我注意到在.toPrecision方法中使用数字的长度时，您将始终返回原始值。这并不是很好，但至少你不会犯任何错误。如果你想调整这个行为的四舍五入数字，我建议使用占位符字段/属性/东西来存储值。

I'm working on this page - http://www.medilogicuk.com/v1/products/calculate-savings/

It's a simple calculator that calculates savings. At the moment the default values in the "Pharmacist" & "Dispenser/Technician" inputs are per annum figures, when the user clicks on the drop down and selects "per hour" I want the figures to automatically change to per hour (via a simple calculation)... and vice versa. The input needs to (re)calculate whatever number the user enters, so if they enter 50.00 and change to per annum then the per annum figure needs to reflect that.

How could I implement this?

Here's my code to create that table:

<table border="0">
  <tr>
    <td colspan="3"><h3>Current service costs</h3></td>
  </tr>
  <tr>
    <td width="440"><p>Pharmacist</p></td>
    <td><p style="padding-left:5px!IMPORTANT;">&pound;
        <input value="42500" type="text" name="pharmacist" />
      </p></td>
    <td width="5" rowspan="2"><select>
        <option value="perannum">per annum</option>
        <option value="perhour">per hour</option>
      </select></td>
  </tr>
  <tr>
    <td><p>Dispenser / Technician</p></td>
    <td><p style="padding-left:5px!IMPORTANT;">&pound;
        <input value="17500" type="text" name="dispenser" />
      </p></td>
  </tr>
  <tr>
    <td colspan="3">&nbsp;</td>
  </tr>
</table>

解决方案

Worked out a solution for you: http://jsfiddle.net/tive/Gya43/

javascript

$(function() {
    $('#ddlDuration').change(function() {
        var pharmacist = $('#pharmacist');
        var dispenser = $('#dispenser');

        if ($(this).val() == 'perhour') {
            pharmacist.val(toHour(pharmacist.val()));
            dispenser.val(toHour(dispenser.val()));
        } else {
            pharmacist.val(toAnnual(pharmacist.val()));
            dispenser.val(toAnnual(dispenser.val()));
        }
    });

    function toHour(annumRate) {
        var num = (annumRate / 8760);
        return num.toPrecision(annumRate.length);
    }

    function toAnnual(hourRate) {
        var num = (hourRate * 8760);
        return num.toFixed(0);
    }
});

If you run into troubles with num.toFixed(2) try num.toPrecision(2) since that will be more precise.

EDIT: I noticed when using the length of your number in the .toPrecision method, you will always return the original value. It's not so well rounded down but at least you won't get any mistakes. If you want to tweak this behaviour for rounded numbers I suggest to use a placeholder field/attribute/something to store value.

这篇关于通过下拉菜单更改文本框中的默认数字的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！