下拉框逻辑，使用javascript进行加减_Javascript_Html

下拉框逻辑，使用javascript进行加减

javascript html

下拉框逻辑，使用javascript进行加减,javascript,html,Javascript,Html,我只是想找出做某事的最佳方法。在我的页面上，我有两个下拉框和一个总文本字段当我从下拉框中选择一个选项时，我希望总数能够相应地更新，我认为我到目前为止已经这样做了，但我没有考虑他们是否改变主意，再次更改相同的下拉框我的HTML页面看起来是这样的 <body> <div id = "form"> <form id = "test"> <p> <label>Case:</label> <select id="box1"

我只是想找出做某事的最佳方法。在我的页面上，我有两个下拉框和一个总文本字段

当我从下拉框中选择一个选项时，我希望总数能够相应地更新，我认为我到目前为止已经这样做了，但我没有考虑他们是否改变主意，再次更改相同的下拉框

我的HTML页面看起来是这样的

<body>
<div id = "form">
<form id = "test">
<p>
<label>Case:</label>
<select id="box1" onchange="code(1)">
  <option value="0.00">No Case - $0.00</option>
  <option value="300.00">Case 1 - $300.00</option>
  <option value="100.00">Case 2 - $100.00</option>
  <option value="600.00">Case 3 - $600.00</option>
  <option value="50.00">Case 4 - $50.00</option>
</select>

<label>Color:</label>
<select id="box2" onchange="code(2)">
    <option value="20.00">Red - $20.00</option>
    <option value="50.00">Green - $50.00</option>
</select>
<input type="text" name="cost" id="cost" onfocus="this.blur()"/>    
</p>
</form>
</div>
</body>

目前，我可以从框1中选择案例3，它增加了600美元，但如果我改变主意，然后说没有案例，它只会在600美元的基础上增加0美元

很抱歉，如果这是一个很明显的问题，我整天都在做，试图让它发挥作用，我有点脑死亡

谢谢

如果我理解正确，您希望根据所选列表值更新文本框值

<select id="box1">
<option value="0.00">No Case - $0.00</option>
<option value="300.00">Case 1 - $300.00</option>
<option value="100.00">Case 2 - $100.00</option>
<option value="600.00">Case 3 - $600.00</option>
<option value="50.00">Case 4 - $50.00</option>
</select>
<select id="box2">
<option value="20.00">Red - $20.00</option>
<option value="50.00">Green - $50.00</option>
</select>
<input type="text" name="cost" id="cost"/>

工作示例

您总是将当前成本单元添加到刚刚更改的值中-您应该将两个

框

值一起添加，而不管哪一个值更改了

function code() {   // forget the parameter

    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    var cost = document.getElementById('cost');

    var total = parseFloat(box1.value) + parseFloat(box2.value);
    cost.value = total;
}

无需使用

selectedIndex

，只需直接使用选项“

value

属性”

在

工作时，要做的事情是保留上一个值的记录，以便可以减去它。它需要位于全局变量中，以便在函数调用之间维护它

从上一个值零开始，每次更改

选择

时，减去上一个值并添加当前值

var prevboxcost = 0;
function code(num){
    var boxnum = "box"+num;
    if (boxnum == "box1")
    {
    var b = document.getElementById("box1");
    }
    else if(boxnum == "box2")
    {
    var b = document.getElementById("box2");
    }


    var boxcost = parseFloat(b.options[b.selectedIndex].value);
    var cost = parseFloat(document.getElementById('cost').value);
    // do the addition but subtract the old value
    cost = cost + boxcost - prevboxcost;
    // now set prev variable so you can subtract it next time round
    prevboxcost = boxcost;
    document.getElementById('cost').value = cost;
}

我可能会将

这个

传递给函数，因为这是

选择

元素本身，您不需要找到它。

不，仅使用表单中已有的两个值就容易多了-看我的答案与此相比有多短@阿尔尼塔克：你说得很对。不过，出于比较和搜索结果的目的，将此答案留在这里可能是有用的。

function code() {   // forget the parameter

    var box1 = document.getElementById('box1');
    var box2 = document.getElementById('box2');
    var cost = document.getElementById('cost');

    var total = parseFloat(box1.value) + parseFloat(box2.value);
    cost.value = total;
}

var prevboxcost = 0;
function code(num){
    var boxnum = "box"+num;
    if (boxnum == "box1")
    {
    var b = document.getElementById("box1");
    }
    else if(boxnum == "box2")
    {
    var b = document.getElementById("box2");
    }


    var boxcost = parseFloat(b.options[b.selectedIndex].value);
    var cost = parseFloat(document.getElementById('cost').value);
    // do the addition but subtract the old value
    cost = cost + boxcost - prevboxcost;
    // now set prev variable so you can subtract it next time round
    prevboxcost = boxcost;
    document.getElementById('cost').value = cost;
}