javascript - 使用javascript从2个选择字段计算数据到输入字段

Question

我想计算 HTML 中不同选择的 2 个选项，并将结果显示在输入字段中。第一个 select 将从 mysql 数据库中填充，第二个 select 将填充 1 个选项，即第一个选项。我想将它们相乘并在最后一个输入字段中显示结果。这是一个例子:

数据库表的字段是“id product”-id quantity price type table view

这是我想要的结果:to display

当用户选择数量时，相应的值将显示到下一个字段。

在最后一个输入字段之后，我想计算之前的选择

• 用户只能选择数量不能选择价格

我用 php 做了一个选择，然后做了一个数组，它被转换成 javascript 数组对象

<?php
        $sth = $conn->prepare("SELECT quantity,price FROM eb_products_price WHERE product_id = 20");
        $sth->execute();

/* Fetch all of the remaining rows in the result set */
print("Fetch all of the remaining rows in the result set:\n");
$result = $sth->fetchAll(PDO::FETCH_COLUMN|PDO::FETCH_GROUP);
$json_array = json_encode($result);
print_r($result);

使用这段代码，我唯一能做的就是用 foreach 显示数量但价格将保持最后一个，并且在我更改数量时不会改变。

我找到了一种显示正确价格的方法，但是使用 javascript 这里是代码

<script>
var arrayObjects = {"400":["0.8"],"300":["0.9"],"200":["0.95"],"100":["1.1"]}


function products() {
    var quantity= document.getElementById("quantity");
    var price= document.getElementById("price");
    var arrprice = quantity.options[quantity.selectedIndex].value;
    while (price.options.length) {
        price.remove(0);
    }
    var prices = arrayObjects[arrprice];
    if (prices) {
        var i;
        for (i = 0; i < prices.length; i++) {
            var price1 = new Option(prices[i], i);
            price.options.add(price1);

        }
    }
}
</script>

这是没有最后一部分代码的计算函数:

calculate = function()
{
    var quantity= document.getElementById('quantity').value;
    var price= document.getElementById('price').value; 
    var number = parseFloat(quantity)*parseFloat(price);
    var n = number.toFixed(2);
    document.getElementById('result').value = n
   }

Answer 1

要动态更改 HTML 元素，您需要事件监听器，例如下面的 onChange 示例:

var arrayObjects = {"400":["0.8"],"300":["0.9"],"200":["0.95"],"100":["1.1"]}


function products() {
    var quantity = document.getElementById("quantity");
    var factor = document.getElementById("factor"); // added
    var price= document.getElementById("price");
    
    // Fill dropdown (quantity)
    while (quantity.options.length) { 
        quantity.remove(0);
    }

    // fill by key
    for( var quantity_key in arrayObjects ) { 
      var quantity_option = new Option(
        quantity_key,
        quantity_key
      );
      quantity.options.add(quantity_option);

    }
    
    // onChange-Listener
    quantity.onchange = () => {
      factor.value = arrayObjects[quantity.value];
      
      // look for factor by key in arrayObjects
      price.value = Math.round( 
        quantity.value *arrayObjects[quantity.value] 
      );
    };
}



products();

<select id='quantity'></select>
KG
<input type='text' id='factor' readonly="readonly">
<input type='text' id='price' readonly="readonly">