HTML Select nesnesindeki değerleri çoklu seçemek için multiple niteliğini kullanmışsınızdır. Peki çoklu seçim yaptıktan sonra bu seçilen öğeleri javascript tarafında okumak nasıl mümkün olacak. İşte bu yazıda çoklu seçim yaptığınız öğeleri javascript tarafında seçeceğiniz kodları bulacaksınız.
Bir select nesnesi seçildiyse selected niteliği true olarak işaretlenir. ve select nesnesinin option ögeleri üzerinde dönerek selected olan değleri işleyebiliriz. Aşağıdaki kodda seçili olan değeleri ekrana uyarı olarak yazdırmaktadır.
JavaScript Kodu: JavaScript Çoklu Seçim Yapma
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 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>Tasarim Kodlama</title> </head> <body> <select id="secim" multiple size="10"> <option value="Futbol">Futbol</option> <option value="Basketbol">Basketbol</option> <option value="Voleybol">Voleybol</option> <option value="Yüzme">Yüzme</option> <option value="Güreş">Güreş</option> </select> <script> var secim=document.querySelector("#secim"); secim.onchange=function(event) { //select içindeki tüm elemanları seçiyoruz. var liste= this && this.options; //tüm liste elemanları üzerinde dönüyor. for(var i=0;i<liste.length;i++) { if(liste[i].selected) //seçili olanı listeleyecek { alert(liste[i].value); } } } </script> </body> </html> |
Yorum Yap