Question

我正在撰写此页面 - http://www.medilogicuk.com/v1/products/calculate-savings/

这是一个计算节省的简单计算器。目前，“药剂师”中的默认值为＆amp; “分配器/技术人员”输入是每年的数字，当用户点击下拉菜单并选择“每小时”时，我希望数字自动更改为每小时（通过简单的计算）......反之亦然。输入需要（重新）计算用户输入的任何数字，因此如果他们输入50.00并更改为每年，那么每年的数字需要反映出来。

我怎么能实现这个？

这是我创建该表的代码：

<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>

Answer 1

您需要执行以下操作。假设“select”已获得并且id为“ddlDuration” 使用JQuery

$('#ddlDuration').change(function(){
    if($(this.val) == 'perhour'{
         pharmacist = $('input[name="pharmacist"]');
         pharmacist.val( calculateHourlyFromAnnual( pharmacist.val() ) );
     }
});

function calculateHourlyFromAnnual( annumRate )
{
    return 100; // calculate the value of the hourly rate based on the per-annum rate
}

Answer 2

好的，我会把它分解。

首先，此解决方案使用jQuery库，因此您需要在<HEAD>部分中引用它。您将需要引用将放置代码的javascript文件：

<html>
    <head>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <!-- You need to define the file name and path as appropriate for yourself. -->
        <script type="text/javascript" src="http://path-to-your-url.com/scripts/script.js"></script>
    </head>
...
</html>

接下来，您需要对标记进行一些小的更改。

<input value="42500" type="text" name="pharmacist" />
<select>
<input value="17500" type="text" name="dispenser" />

变为：

<input value="42500" type="text" name="pharmacist" id="pharmacist" />
<select id="rate">
<input value="17500" type="text" name="dispenser" id="dispenser" />

关键更改是新的id属性。这些将由您的javascript用于识别代码中的关键元素（您可以使用name属性，正如JQone建议的那样 - 我更喜欢使用id来自风格的观点，因为jQuery / CSS选择器代码较小）。

最后，您创建了一个javascript文件（我在这里称之为“script.js”）并将其放在网站中的正确文件夹中（与HTML文档的HEAD部分中使用的路径保持一致，这将是网站的根文件夹的子文件夹，称为“脚本”）。该文件将包含以下内容：

// This code sets up the javascript. It is saying: 'when the document is ready, register the "changeRate" function with the "change" event of the select box'. So whenever the select box's value is changed, the function will be called.
$( document ).ready( function() {
    $( 'select#rate' ).change( changeRate );
} );

// This sets the values of the text values based upon the selected rate and the existing value.
var changeRate = function() {
    var rate = $( this );
    var pharmacist = $( 'input#pharmacist' );
    var dispenser = $( 'input#dispenser' );

    if ( rate.val() == 'perhour' ) {
        pharmacist.val( calculateHourlyFromAnnual( pharmacist.val() ) );
        dispenser.val( calculateHourlyFromAnnual( dispenser.val() ) );
    }
    else if ( rate.val() == 'perannum' ) {
        pharmacist.val( calculateAnnualFromHourly( pharmacist.val() ) );
        dispenser.val( calculateAnnualFromHourly( dispenser.val() ) );
    }
};

// Calculates an hourly rate based upon the supplied per annum rate. At the moment this doesn't take into account scenarios where the provided value is empty or is not a number so you will need to adjust appropriately.
function calculateHourlyFromAnnual( annumRate )
{
    -- Making the assumption that a per-annum rate of $50,000 translates to an hourly rate of $50
    return annumRate / 1000; 
}

// Calculates a per-annum rate based upon the supplied hourly rate. At the moment this doesn't take into account scenarios where the provided value is empty or is not a number so you will need to adjust appropriately.
function calculateAnnualFromHourly( hourlyRate )
{
    -- Making the assumption that an hourly rate of $50 translates to a per-annum rate of $50,000
    return hourlyRate * 1000;
}

很可能，我用于计算费率变化的公式过于简单，但我不知道您所处的业务需求。你必须自己弄清楚正确的公式。

基本上，如果您按照这些步骤操作，则应在每年和每小时之间切换选择列表时更改值。

Answer 3

为您制定了解决方案：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);
    }
});

如果你遇到num.toFixed（2）的麻烦，请尝试num.toPrecision（2），因为这会更精确。

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

Answer 4

您必须使用JavaScript来解决此问题。

使用jQuery，例如在下拉列表元素上注册更改事件侦听器，并在下拉元素的选定值更改时更新两个输入字段的值。

通过下拉列表更改文本框中的默认数字

4 个答案: