下拉框逻辑，使用JavaScript加减

Question

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

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

我的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>

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

按照目前的情况，我可以从box1中选择情况3，它会增加$ 600，但是如果我改变主意，然后再说不出情况，它只会将0增加到那的600。

很抱歉，如果它只是一个整日都在做的很棘手的问题，试图使它正常工作，并且有点脑筋急转弯。

谢谢

Answer 1

您总是将当前成本单元添加到刚刚更改的值中-无论哪个值更改，都应将两个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;
}

无需使用selectedIndex ，只需直接使用选项的value属性。

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

Answer 2

要做的是维护一个先前值的记录，以便您可以减去它。 必须在全局变量中才能在函数调用之间进行维护。

从先前的零值开始，每次更改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;
}

我很可能会通过this给函数，因为这是select元素本身，你并不需要找到它。

Answer 3

如果我理解正确，则要更新相对于所选列表值的文本框值

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

您可以使用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());
});

工作示例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