Question

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

该字段的数据库表为“ id产品” -id数量价格类型 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">

Answer 2

在javascript中，要获取选择的选定元素（值），请使用：

var e = document.getElementById("quantity");
var quantity= e.options[e.selectedIndex].text;

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

2 个答案: