<form>
<select name="package" id="package">
<option data-price="100000" data-discount="10">Paket 1</option>
<option data-price="150000" data-discount="10">Paket 2</option>
<option data-price="200000" data-discount="10">Paket 3</option>
</select>
<div>
<label for="price">Harga</label>
<input type="text" name="price" readonly />
<br>
<label for="price">Discount</label>
<input type="text" name="discount" readonly />
<br>
<h4>Total: <span id="total">0</span></h4>
</div>
</form>
$('#package').on('change', function(){
// ambil data dari elemen option yang dipilih
const price = $('#package option:selected').data('price');
const discount = $('#package option:selected').data('discount');
// kalkulasi total harga
const totalDiscount = (price * discount/100)
const total = price - totalDiscount;
// tampilkan data ke element
$('[name=price]').val(price);
$('[name=discount]').val(totalDiscount);
$('#total').text(`Rp ${total}`);
});
This Pen doesn't use any external CSS resources.