0

我只是想找出做某事的最佳方法。在我的页面上，我有 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 美元，但如果我改变主意然后说没有案例，它只会在 600 中添加 0。

抱歉，如果它是一个非常明显的问题，只是整天都在努力让它工作并且有点脑死。

谢谢

4

3 回答 3

2

您总是将当前成本单元添加到刚刚更改的任何值 - 无论哪个值更改，您都应该将这两个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/工作演示

于 2012-05-28T06:49:22.330 回答
0

要做的事情是保留先前值的记录，以便您可以减去它。这需要在一个全局变量中，以便在函数调用之间进行维护。

从先前的零值开始，每次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元素本身，您不需要找到它。

于 2012-05-28T06:54:19.567 回答
-1

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

<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

于 2012-05-28T06:46:11.020 回答