我試圖通過更改兩個不同的選擇選項來更改輸入框的值。第一個select框product_type在選項上有兩個不同的數據屬性：data-price和data-price_c。第二個選擇框是在或 之間pay_type進行選擇，更新 的值。data-pricedata-price_clprice這是我試過的：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 selected_type = pt.options[pt.selectedIndex];sp.onchange = function(){ var selected = sp.options[sp.selectedIndex]; if (selected_type === 1){ lp.value = selected.getAttribute('data-price'); } else { lp.value = selected.getAttribute('data-price_c'); } fp.value = "";};sp.onchange();count.onchange = function(){ fp.value = lp.value * count.value;} <div> <label for="select_product">Select Product</label> <select name="product_id" id="select_product" onchange="update();"> <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>
1 回答
心有法竹
TA貢獻1866條經驗 獲得超5個贊
我希望我正確地低估了您需要從代碼和解釋中完成的工作：
你的第一個問題是你有selected_type你的外部 onchange 功能，所以它沒有得到更改的選項 onchange。
其次是您嘗試將值1 & 2與元素進行比較而不實際從元素中提取這些值（.value缺少selected_type）
Pay type我假設您也需要更新更改的值Select Product，所以在這種情況下，將兩個 HTML 選擇包裝到一個 div 中是一個技巧div id="wrapper"，如果它們中的任何一個發生更改，它將監聽兩個選擇和調用函數。所以現在你打電話給它wrapper.onchange。
我還建議將您的計算 fp.value = lp.value * count.value;放在這個函數中，以更新任何這些元素發生變化時的總價，因此我將您包裝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 關注
- 187 瀏覽
添加回答
舉報
0/150
提交
取消