【问题标题】:Change default figures in textbox via dropdown通过下拉更改文本框中的默认数字
【发布时间】:2012-01-20 06:41:23
【问题描述】:

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

这是一个计算储蓄的简单计算器。目前,“药剂师”和“分配器/技术员”输入中的默认值是每年的数字,当用户单击下拉菜单并选择“每小时”时,我希望这些数字自动更改为每小时(通过简单的计算)...反之亦然。输入需要(重新)计算用户输入的任何数字,因此如果他们输入 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>

【问题讨论】:

    标签: html forms html-table


    【解决方案1】:

    为您制定了解决方案: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 方法中使用数字的长度时,您将始终返回原始值。它不是很好,但至少你不会犯任何错误。如果您想针对四舍五入的数字调整此行为,我建议使用占位符字段/属性/某物来存储值。

    【讨论】:

      【解决方案2】:

      好的,我会分解它。

      首先,此解决方案使用 jQuery 库,因此您需要在 &lt;HEAD&gt; 部分中引用它。您将非常希望引用将放置代码的 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;
      }
      

      很可能,我用于计算利率变化的公式过于简单,但我不知道您的情况下的业务需求。您必须自己找出正确的公式。

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

      【讨论】:

        【解决方案3】:

        您需要执行以下操作。 假设“选择”已经得到并且 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
        }
        

        【讨论】:

        • 好的,谢谢。用户可以将输入更改为他们每年的任何费用,因此结果数字将取决于他们输入的数字(或者如果他们将输入保留为默认值)。
        • 你刚刚在我面前回答。我只是想指出你使用的选择器应该以'#'开头,如果它引用选择的 ID(对于 HTML "
        • @zac 那么这个答案是否只是说如果输入更改为每小时然后将输入值更改为 100?否则不太正确,我需要它获取输入中的任何值,执行计算(如从输入的每年值中计算出每小时值),然后在输入中输出结果。如果你明白我在说什么,输出的结果会根据最初输入的内容而有所不同。
        • 是的,你需要一个算法来计算每小时的价值——如果当前药剂师的价值是 42500 英镑,那么每小时的费用应该是 65 英镑或其他什么。如何得出你必须定义自己的每小时价值的逻辑。代替“100”,您可以尝试类似:“$('input[name=pharmacist]').val(calculateHourlyFromAnnual($('input[name=pharmacist]').val()))”其中“ calculateHourlyFromAnnual(...)" 是您定义的函数。您还需要运行一个函数,将值反转回每年。
        • @Zac 我添加了赏金,因为我需要更多的人参与解决方案。是否可以将我最后的请求整合到答案中?
        【解决方案4】:

        你必须使用 JavaScript 来解决这个问题。

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

        【讨论】:

          猜你喜欢
          • 2013-08-15
          • 2015-08-27
          • 2021-11-18
          • 1970-01-01
          • 2017-09-19
          • 2022-10-21
          • 1970-01-01
          • 2010-12-19
          • 2013-02-25
          相关资源
          最近更新 更多