在javascript中更改下拉框值时如何获取文本框值

Question

我有 包含类似表格的表格

商品价格数量总计

苹果    100     2         200

橙色 200    2          600

总计 = 600。

当下拉列表更改时，项目字段是下拉列表，价格将更改，总价值和总计也会更改。我的问题是再次选择苹果和橙色时转到苹果更改项目我的总数没有改变。

我的 Javascript 代码：

function totalprice(element, price) {
    var elementid = element.id;
    var expr = elementid.substring(elementid.indexOf(":") + 1, elementid.length);
    var quantity = document.getElementById("quantity:" + expr).value;
    var price = document.getElementById("price:" + expr).value;
    if (quantity > 0) {
        document.getElementById("total:" + expr).value = (parseInt(quantity)) * (parseInt(price));
        var grandtotal = document.getElementById("total:" + expr).value;
        var gtot = 0;
        var amount = 0;
        for (var i = 0; i <= expr; i++) {
            //document.getElementById("total").value="";
            gtot = document.getElementById("total:" + expr).value;
            amount = parseInt(gtot) + parseInt(amount);
        }
        document.getElementById("total").value = amount;
    }
    return true;
}

我知道错误是在for循环中，只是它很简单，但我不知道如何解决。

Answer 1

我得到了使用表行长度的解决方案，并将该长度用于我的 for 循环现在我的代码就像

function totalprice(element,price)

{

var elementid=element.id;
var expr = elementid.substring(elementid.indexOf(":") + 1, elementid.length);
var quantity = document.getElementById("quantity:"+expr).value;

        var price = document.getElementById("price:" + expr).value; 
        if(quantity >0)
        {
        document.getElementById("total:"+ expr ).value= (parseInt(quantity))*(parseInt(price));           
        //var grandtotal =document.getElementById("total:"+expr).value;
        //var grandtotal = document.getElementsByClassName("total"+expr);

        var rowcount = document.getElementById('table').rows.length;

        var grandtotal = 0;
        var finalamount = 0;
            for(var i=1; i<rowcount; i++)
            {
                grandtotal=document.getElementById("total:"+i).value;
                finalamount = parseInt(grandtotal) + parseInt(finalamount);

            }

            document.getElementById("total").value=finalamount;
        }
      return true;

}

Answer 2

这是您需要的代码：

Java 脚本：

<script>
function getVal(e){
    // for text
    alert(e.options[e.selectedIndex].innerHTML);
    // for value
    alert(e.options[e.selectedIndex].value);
}
</script>

HTML：

<select name="sel" id="sel" onchange='getVal(this);'>
    <option value="1">Apple</option>
    <option value="2">Banana</option>
    <option value="3">Cat</option>
</select>

Answer 3

我在您的 for 循环中看到两个错误，首先您忘记在 getElement 中使用 i，因此您只会多次遍历同一个字段，其次，您只会遍历之前的输入已更新的字段 (i<=expr)，当您实际上想要遍历所有“总计”字段以获得总计时，我建议为您的所有总计字段提供一个类，然后将此代码用于您的循环

var total_fields = document.getElementsByClassName('total');
for (var i = 0; i < total_fields.length; i++) {
    gtot = total_fields[i].value;
    amount+= parseInt(gtot);
}
document.getElementById("total").value = amount;

Answer 4

我认为问题出在这里：

“我的问题是在选择苹果和橙色时再次”

因为我在您的代码中没有看到您在计算总数时实际上是在更新elements id。

所以...如果你这样做：

gtot = document.getElementById("total:" + expr).value;

第一次可以，因为expr var 是原来的，那么gtot 是正确的element id
但是...
...当您进行第二次更改时，该 var 现在具有不同的值...并且gtot 将与您的element id 不匹配以重新计算新值。 （或者在最坏的情况下，将匹配另一个并更新错误的）