Question

我设法使用JS如下设置默认值：

function myFunction() {
    var apple   = 777777; document.getElementById("Apple").value = apple;}

并使用

调用我的下拉菜单

<select class="element select medium" id="ProductOrigin" name="ProductOrigin" onchange="myFunction()">

由于需要创建10个值，因此我创建了10个var并设置了10次，这可能是更好的方法。

也可以进行计算，但不能实时进行，我需要单击 TAB 或使用鼠标单击每个项目，以便在事件发生后进行计算，我们可以通过任何方式进行实时计算或即时计算计算。

我尝试使用onchange(), keyup()作为对输入文本的计算：

<div>
  <label class="description" for="Apple">Apple</label>
  <input id="Apple" name="Apple" class="element text medium" type="text" maxlength="255" value="" readonly="true"/>
</div>

通过任何方式处理事件（一次下拉）（三个下拉菜单中的任何一个），它都会立即进行计算。

工作Codepen可能不是那么快或最好的方法 calculation based on look up and 10 hard coded value

https://codepen.io/dunya/pen/ywvEeg

我不知道如何处理或改进它。

可以帮忙吗？

非常感谢。

Answer 1

这是一些具有以下更改的代码：

分配给加载项的值
从字段中删除了陷阱，并在javascript中替换为事件处理程序
计算所有项目是因为对只读文本字段进行onchange，keyup或模糊处理有什么用？

还有here is the update and working codepen.

function myLoad() {
                var apple   = 777777;
                var apricot   = 111111  ;
                var banana   = 222222  ;
                var bilberry   = 3333 ;
                var blackberry   = 3333  ;
                var blackcurrant   = 2222 ;
                var blueberry   = 88888 ;
                var boysenberry   = 8888888 ;
                var cherry   = 99999 ;
                var coconut = 99887 ;
            $("#Apple").value = apple;
            $("#Apricot").value = apricot;
            $("#Banana").value = banana;
            $("#Bilberry").value = bilberry;
            $("#Blackberry").value = blackberry;
            $("#Blackcurrant").value = blackcurrant;
            $("#Blueberry").value = blueberry;
            $("#Boysenberry").value = boysenberry;
            $("#Cherry").value = cherry;
            $("#Coconut").value = coconut;
        }

function myCalculate(){
      var volume = $("#Volume").val();
      var productOrigin = $("#ProductOrigin").val();
      var geographicalLocation = $("#GeoLocation").val();

      if (volume === "" || productOrigin === "") {
            // alert("Please select the product origin and volume.");
            return;
        }

      var tableToUse = geographicalLocation === "" ? productOrigin : geographicalLocation;

      $("input[type='text']").each(function(i){
       // Current product ID, e.g. "Apple", "Apricot", etc.
       var currentProductId = $(this).attr('id');

       // Amount to multiply.
       var multiplier = $(`table#${tableToUse} tbody > tr[product='${currentProductId}'] > td[volume='${volume}']`).text();

       // A <span> element, to be populated with the calculated product volume.
       var result = $("<span name='result'>");

       // Calculate the figure and update the result element.
       result.text($(this).val() * multiplier); 

       // Remove any previously added <span> result elements.
       $(this).next("span").remove();

       // Insert result after the current input field.
       $(this).after(result);

      }); 

    }

myLoad();

        $('.select').on('change', myCalculate);
        $("input[type='text']").on('keyup', myCalculate);

根据3个下拉值和硬编码值实时计算

1 个答案: