1 回答

TA貢獻(xiàn)1866條經(jīng)驗(yàn) 獲得超5個(gè)贊
我希望我正確地低估了您需要從代碼和解釋中完成的工作:
你的第一個(gè)問(wèn)題是你有selected_type你的外部 onchange 功能,所以它沒有得到更改的選項(xiàng) onchange。
其次是您嘗試將值1 & 2與元素進(jìn)行比較而不實(shí)際從元素中提取這些值(.value缺少selected_type)
Pay type我假設(shè)您也需要更新更改的值Select Product,所以在這種情況下,將兩個(gè) HTML 選擇包裝到一個(gè) div 中是一個(gè)技巧div id="wrapper",如果它們中的任何一個(gè)發(fā)生更改,它將監(jiān)聽兩個(gè)選擇和調(diào)用函數(shù)。所以現(xiàn)在你打電話給它wrapper.onchange。
我還建議將您的計(jì)算 fp.value = lp.value * count.value;放在這個(gè)函數(shù)中,以更新任何這些元素發(fā)生變化時(shí)的總價(jià),因此我將您包裝Count:到wrapper div.
希望這可以幫助。
var sp = document.getElementById('select_product');
var lp = document.getElementById('lprice');
var count = document.getElementById('count');
var fp = document.getElementById('price');
var pt = document.getElementById('paytype');
var wrapper=document.getElementById('wrapper');
wrapper.onchange = function(){
var selected = sp.options[sp.selectedIndex];
var selected_type = pt.options[pt.selectedIndex].value;
if (selected_type === "1"){
lp.value = selected.getAttribute('data-price');
}
if (selected_type === "2"){
lp.value = selected.getAttribute('data-price_c');
}
fp.value = "";
fp.value = lp.value * count.value;
};
wrapper.onchange();
<div id="wrapper">
<div>
<label for="select_product">Select Product</label>
<select name="product_id" id="select_product" >
<option value="1" data-price="10000" data-price_c="11000">Product 1</option>
<option value="2" data-price="20000" data-price_c="21000">Product 2</option>
<option value="3" data-price="30000" data-price_c="31000">Product 3</option>
</select>
</div>
<div>
<label for="paytype">Pay type:</label>
<select name="paytype" id="paytype">
<option value="1">Cash</option>
<option value="2">Dept</option>
</select>
</div>
<div>
<label for="lprice">Single Price:</label>
<input type="text" name="lprice" id="lprice" class="form-control" tabindex="1" readonly/>
</div>
<div>
<label for="count">Count:</label>
<input type="number" name="count" id="count" class="form-control" tabindex="1" />
</div>
</div>
<div>
<label for="price">Full Price:</label>
<input type="text" name="price" id="price" class="form-control" tabindex="1" readonly/>
</div>
- 1 回答
- 0 關(guān)注
- 198 瀏覽
添加回答
舉報(bào)