<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<title>Product Selection</title>
</head>
<body>
<form>
<label for="laptopSelect">Laptop:</label>
<select class="productSelect" id="laptopSelect" data-price="1500">
<option value="0">Seçiniz</option>
<option value="1" data-price="1500">1 Adet</option>
<option value="2" data-price="1600">2 Adet</option>
<option value="3" data-price="1700">3 Adet</option>
</select>
<label for="phoneSelect">Telefon:</label>
<select class="productSelect" id="phoneSelect" data-price="800">
<option value="0">Seçiniz</option>
<option value="1" data-price="800">1 Adet</option>
<option value="2" data-price="850">2 Adet</option>
<option value="3" data-price="900">3 Adet</option>
</select>
<input type="text" id="totalPrice" name="totalPrice" readonly />
</form>
<script>
$(document).ready(function () {
updateTotalPrice();
$(".productSelect").on("change", function () {
updateTotalPrice();
});
});
function updateTotalPrice() {
var totalPrice = 0;
// Her bir seçeneği dolaş
$(".productSelect").each(function () {
var selectedValue = $(this).val();
var price = parseFloat($(this).find(":selected").data("price")) || 0;
if (selectedValue !== "0") {
totalPrice += price;
}
});
// Toplam fiyatı ekrana yazdır
$("#totalPrice").val(totalPrice.toFixed(2));
}
</script>
</body>
</html>