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.
Ekran Çıktısı:
| 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ı: