我有這個選擇器，根據(jù)選項總和 ID 屬性和輸入編號計算選擇更改，問題是當(dāng)我選擇選項 1 并增加輸入編號時工作得很好，但是當(dāng)我選擇選項 2 或 3 并增加輸入編號時總和的計算再次混亂。當(dāng)我選擇不同的選項時，如果進(jìn)行了更改，我會嘗試將總價再次更改為選項 ID 中的價格。// Input number $('input[name=\'cantitate\']').on('change', function() { var cant = $('#cantitate').val(); var price = $(this).children(":selected").attr("id"); $('#total').text(price * cant + ' USD'); });// Select box $('#variantacurs').on('change', function() { var cant = $('#cantitate').val(); var price = $(this).children(":selected").attr("id"); $('#total').text(price * cant + ' USD'); });<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div id="total">60</div> <select class="form-control" id="variantacurs" name="variantacurs"> <option value="">---SELECT---</option> <option id="100" value="Option 1">Option 1</option> <option id="210" value="Option 2">Option 2</option> <option id="300" value="Option 3">Option 3</option> </select> <input type="number" name="cantitate" id="cantitate" placeholder="1" min="1" value="1" >
2 回答
蝴蝶不菲
TA貢獻(xiàn)1810條經(jīng)驗 獲得超4個贊
這段代碼有很多問題：
標(biāo)簽
id不是存儲值的好方法。值可以存儲在value屬性本身中，而標(biāo)簽是<option>元素的實(shí)際內(nèi)容。這也使得檢索值變得更加容易。您可以只定義一個函數(shù)（例如
calc()在我的示例中），并分配它對onchange輸入的引用，而不是重復(fù)代碼。使用 將
Number()輸入的字符串轉(zhuǎn)換val()為正確的數(shù)字。
例子：
// Input number
$('input[name=\'cantitate\']').on('change', calc);
$('#variantacurs').on('change', calc);
function calc() {
var cant = Number($('#cantitate').val());
var price = Number($('#variantacurs').val());
$('#total').text(cant * price + ' USD');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="total">60</div>
<select class="form-control" id="variantacurs" name="variantacurs">
<option value="60" disabled selected>---SELECT---</option>
<option value="100">Option 1</option>
<option value="210">Option 2"</option>
<option value="300">Option 3"</option>
</select>
<input type="number" name="cantitate" id="cantitate" placeholder="1" min="1" value="1">
狐的傳說
TA貢獻(xiàn)1804條經(jīng)驗 獲得超3個贊
拼寫錯誤，使用 .form-control 選擇輸入/選擇值。
$(".form-control").children(":selected")
$("input[name='cantitate']").on("change", function () {
var cant = $("#cantitate").val();
var price = $(".form-control").children(":selected").attr("id");
console.log(price)
$("#total").text(price * cant + " USD");
});
我建議不要使用 id 作為值，而使用 value 作為值?？梢园慈缦路绞竭M(jìn)行一些清潔。
(function ($) {
// Input number
const input = $("input[name='cantitate']");
const select = $(".form-control");
input.on("change", function () {
calculate($(this).val(), select.children(":selected").val());
});
// Select box
select.on("change", function () {
calculate(input.val(), $(this).val());
});
function calculate(input, selected) {
var cant = Number(input);
var price = Number(selected);
$("#total").text(`Total: ${price * cant + " USD"}`);
}
})($);
.as-console {
min-height: 100% !important;
}
.as-console-row {
color: blue !important;
}
<div id="total">Total: 0</div>
<select class="form-control" id="variantacurs" name="variantacurs">
<option value="">---SELECT---</option>
<option value="100">Option 1</option>
<option value="200">Option 2</option>
<option value="300">Option 3</option>
</select>
<input type="number" name="cantitate" placeholder="1" min="1" value="1">
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
- 2 回答
- 0 關(guān)注
- 142 瀏覽
添加回答
舉報
0/150
提交
取消