v2.5.2
Giriş yap

Select seçildiğinde işlem yapılması

nrtszr
587 defa görüntülendi
3

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>
javascript
Cevap yaz
Cevaplar (3)
isimimcokguzel2
1447 gün önce

Hocam böyle yaparsanız çalışacaktır

<html>
    <body>
        <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>
        
        <script>
            [...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);
                    
                    //işlemler Buraya
                })
            })
        </script>
    </body>
</html>
1
#003282
nrtszr
1447 gün önce

Aşagıdaki hatayı verdi.

onchange de kullandıgım fonksiyona ekledim.

function odemegoster() {
    if (odemeekrani.style.display == "none") {
        odemeekrani.style.display = "";
    }

    {
    $( "#sepet" ).append('<div class="row font-monospace"><div class="col">A asd kalemi</div><div class="col">222</div><div class="col">222 TL</div></div>');
     }

    [document.querySelectorAll("select.oda")].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);
        })
    })
}

Uncaught TypeError: urun.addEventListener is not a function

at (index):656
at Array.forEach (<anonymous>)
at odemegoster ((index):653)
at HTMLSelectElement.onchange ((index):156)

Bilerek
0
#003281
isimimcokguzel2
1447 gün önce

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);
    })
})
0
#003272