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到那就是那个。

很抱歉，如果这是一个非常明显的问题，那么整天都在试图让它发挥作用并且有点脑死亡。

由于

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 个答案: