Bu yazımızda jQuery ie Select nesnesi option kullanımını göreceğiz. Hazırlayacağımız sayfada hangi option öğesinin seçili olduğunu kontrol ederek ekranda mesaj verdireceğiz. Buton‘ a basıldığında seçili olan option nesnesinin if -else if yapısını kullanarak alert ile ekranda görüntülenmesini sağlayacağız. Aynı zamanda select nesnemizi “change” olayını kullanarak anlık olarak seçim yapıldığında hangi option nesnesi seçilmişse sayfamızda oluşturduğumuz div içinde gösterilmesini sağlayacağız.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>Untitled Document</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> </head> <body> <select id="secim"> <option value="Seçim Yap">Seçiniz</option> <option value="Ali">Ali</option> <option value="Ayşe">Ayşe</option> <option value="Mehmet">Mehmet</option> <option value="Fatma">Fatma</option> </select> <input type="button" id="btn" value="TIKLA"> <div id="kutu"></div> <script> $(document).ready(function() { //Seçim yapılıp butona tıklandığında çalışacak kodlar $("#btn").on("click",function(){ //var sonuc; alert($("#secim").val()+ " isimli öğrenci seçili"); }); //Seçim değiştiğinde çalışacak kodlar $("#secim").on("change",function(){ $("#kutu").html($("#secim").val()); }) }); </script> </body> </html> |
Ekran Çıktısı:
Yaptığın katkı için teşekkürler. Yaptığım bir uygulamada prop kullanmam gerekiyordu. Uygulamanın bir parçası olarak yazmıştım. Şimdi sizin yazdığınız şekilde güncelledim.
Kardeşim pisikopat mısın? insanları neden uğraştırıyorsunuz!!
$(document).ready(function() {
//Seçim yapılıp butona tıklandığında çalışacak kodlar
$(“#btn”).on(“click”,function(){
//var sonuc;
alert($(“#secim”).val()+ ” isimli öğrenci seçili”);
});
//Seçim değiştiğinde çalışacak kodlar
$(“#secim”).on(“change”,function(){
$(“#kutu”).html($(“#secim”).val());
})
});