Select seçildiğinde işlem yapılması
Selectbox da verim var bu veriye göre id degeri odemeekran divine hidden field ve yazı yazdırmak istiyorum nasıl yapabilirim?
Yazı :
1 adet aldığınız A Kalemi fiyatı 50 tl
value degerinden adet fiyatını alıp ürün adını select deki urunadi dan alması gerekiyor.
Nasıl yapabilirim?
<div class="alert alert-primary mt-3" role="alert" id="odemeekrani">
</div>
<select class="form-control form-control-sm" onchange="odemegoster()" name="urun1" id="urun1" urunadi="A Kalemi">
<option fiyat="0" value="0">Seçiniz..</option>
<option fiyat="50" value="1">1</option>
<option fiyat="60" value="2">2</option>
<option fiyat="75" value="3">3</option>
<option fiyat="105" value="4">4</option>
</select>
<script>
$(document).ready(function(){
odemeekrani.style.display = "none";
});
function odemegoster() {
if (odemeekrani.style.display == "none") {
odemeekrani.style.display = "";
}
}
<script>
Hocam direkt olarak urunadi
alınmıyor diye biliyorum data-urunadi
daha kullanışlı olur.
Aynı şey fiyatlar içinde geçerli
Daha verimli olması için tüm ürün select lerine urun
classı verelim.
<div class="alert alert-primary mt-3" role="alert" id="odemeekrani">
</div>
<select class="form-control form-control-sm urun" name="urun1" id="urun1" data-urunadi="A Kalemi">
<option data-fiyat="0" value="0">Seçiniz..</option>
<option data-fiyat="50" value="1">1</option>
<option data-fiyat="60" value="2">2</option>
<option data-fiyat="75" value="3">3</option>
<option data-fiyat="105" value="4">4</option>
</select>
Javascript tarafında rahat edeceğiz böyle yaparsak.
// Tüm ürün classlarını çekiyoruz.
//(Birden fazla ürün olduğunu varsayıyoruz)
[...document.querySelectorAll("select.urun")].forEach(urun => {
// Eğer Select Değişirse (onChange)
urun.addEventListener("change", function(e) {
// data-urunadi nın değerini aldık
var urunadi = this.dataset.urunadi;
//şimdi seçilmiş olan option un fiyatını ve değerini alıcaz
var secilmisOption = this.options[this.selectedIndex];
console.log("Ürün => " + urunadi);
console.log("Fiyat => " + secilmisOption.dataset.fiyat);
console.log("Kaç Tane Alındı => " + secilmisOption.value);
})
})