下拉框逻辑，使用JavaScript加减

Question

Im just stuck a bit in trying to figure out the best way to do something. 我只是想尽办法找出做某事的最佳方法。 On my page i have 2 drop down boxes and a total text field. 在我的页面上，我有2个下拉框和一个总计文本字段。

When i select an option from a drop down box i want the total to be updated accordingly, i think this i have done so far, but i failed to think about if they change their mind and change the same drop down box again. 当我从下拉框中选择一个选项时，我希望总数进行相应的更新，我认为到目前为止我已经这样做了，但是我没想到他们是否改变主意并再次更改了相同的下拉框。

My HTML page looks as so 我的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>

My javascript looks like this 我的JavaScript看起来像这样

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 = b.options[b.selectedIndex].value;
var cost = document.getElementById('cost').value;
cost = parseFloat(cost) + parseFloat(boxcost)
document.getElementById('cost').value = cost;
}

As it stands i can select case 3 from box1 and it adds $600 but if i change my mind and then say no case it just adds 0 to the 600 thats there. 按照目前的情况，我可以从box1中选择情况3，它会增加$ 600，但是如果我改变主意，然后再说不出情况，它只会将0增加到那的600。

Sorry if its a really obvious question just been stuck doing it all day trying to make it work and am a bit brain dead. 很抱歉，如果它只是一个整日都在做的很棘手的问题，试图使它正常工作，并且有点脑筋急转弯。

Thanks 谢谢

Answer 1

You're always adding the current cost cell to whichever value was just changed - you should be adding the two box values together regardless of which one changed. 您总是将当前成本单元添加到刚刚更改的值中-无论哪个值更改，都应将两个box值相加。

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;
}

There's no need to use selectedIndex , just use the options' value properties directly. 无需使用selectedIndex ，只需直接使用选项的value属性。

Working demo at http://jsfiddle.net/J4zyy/ http://jsfiddle.net/J4zyy/上的工作演示

Answer 2

The thing to do is maintain a record of the previous value in order that you can subtract it. 要做的是维护一个先前值的记录，以便您可以减去它。 That needs to be in a global variable in order that it's maintained between function calls. 必须在全局变量中才能在函数调用之间进行维护。

Start out with a previous value of zero, and every time the select is changed, subtract the previous value and add the current value. 从先前的零值开始，每次更改select ，减去先前的值并添加当前值。

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;
}

I would probably pass this to the function because that is the select element itself and you don't need to find it. 我很可能会通过this给函数，因为这是select元素本身，你并不需要找到它。

Answer 3

if i understood correctly, you want to update a text box value respect to selected list value 如果我理解正确，则要更新相对于所选列表值的文本框值

<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"/>

you can use Jquery code, im just suggesting if you use jquery here it'll easy though 您可以使用Jquery代码，即时消息只是建议您在此处使用jquery，尽管这很容易

$('#box2').change(function(){
  total = parseInt($("#box1 option:selected").val())+parseInt($("#box2 option:selected").val());
$('#cost').val(total);
});
$('#box1').change(function(){
  $('#cost').val($("#box1 option:selected").val());
});

working example jsfiddle 工作示例jsfiddle

下拉框逻辑，使用JavaScript加减

问题描述

3 个解决方案

解决方案1
2 已采纳 2012-05-28 06:49:22

解决方案2
0 2012-05-28 06:54:19

解决方案3
-1 2012-05-28 06:46:11

下拉框逻辑，使用JavaScript加减

问题描述

3 个解决方案

解决方案1 2 已采纳 2012-05-28 06:49:22

解决方案2 0 2012-05-28 06:54:19

解决方案3 -1 2012-05-28 06:46:11

解决方案1
2 已采纳 2012-05-28 06:49:22

解决方案2
0 2012-05-28 06:54:19

解决方案3
-1 2012-05-28 06:46:11