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

現状では、ボックス 1 からケース 3 を選択すると、600 ドルが追加されますが、気が変わってケースなしと言うと、そこにある 600 に 0 が追加されます。

本当に明白な質問が、それを機能させようとして一日中立ち往生していて、少し頭が死んでいる場合は申し訳ありません。

ありがとう

4

3 に答える 3

2

変更された値に常に現在のコスト セルを追加します。どちらが変更されたかにbox関係なく、2 つの値を一緒に追加する必要があります。

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 に答える