Form nesnelerimizden bir diğeri ise SELECT etiketiyle oluşturduğumuz seçme kutusu. NAME, SIZE, ve MULTIPLE özelliklerine sahip olan bu nesne, onBlur, onChange, onFocus olay-yönlendiricileri ile kullanılabilir. SELECT nesnesinin değeri, kendisinin ayrılmaz parçası olan OPTION etiketinin VALUE özelliğinden gelir. Yukarıdaki radyo.htm kodunu, aşağıdaki şekilde değiştirip, sec01.htm adıyla kaydedin:
<HTML> <HEAD> <title>Seçme Kutusu Ornegi</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <SCRIPT LANGUAGE = "JavaScript1.2"> function secDegeri(secNesnesi) { return secNesnesi.options[secNesnesi.selectedIndex].value } </SCRIPT> </HEAD> <BODY> <FORM name="form1"> <p><SELECT NAME="sanatci" SIZE=1> <OPTION value="Türkü">Neset Ertas</OPTION> <OPTION value="Sarki">Zeki Müren</OPTION> <OPTION value="Pek anlamadim!">Sezen Aksu</OPTION></P> <input type=button value="Ne tür müzik seviyorum?" onClick="alert(secDegeri(this.form.sanatci))"> </FORM> </BODY> </HTML>
Burada ziyaretçi açısından seçme işlemi, seçme kutusunun sağındaki seçme okuna basarak yapılıyor; fakat bizim açımızdan da önemli bir değişiklik var. Seçilen unsur, SELECT nesnesinin dizi-değişkenine değil, “selectedIndex” adlı endeksin değer (.value) özelliğine yazılıyor. Dolayısıyla, bir if döngüsü ile arama yapmak gerekmiyor; bu değeri uyarı kutusuna sadece ayıklama işlemiyle belirleyip geri gönderiyoruz. Burada dikkat edeceğiniz husus, fonksiyona verilen “bu form” nesnesinin “sanatcı” adlı SELECT nesnesinin bilgi kümesi içinde sadece biri, “selectedIndex” adlı endekse sahiptir. Fonksiyon bu bilgi kümesini “secNesnesi” adıyla ele alıyor ve içindeki “options” dizi-değişkenin ziyaretçinin seçtiği ve dolayısıyla sıra numarası “selectedIndex” olarak işaretlenmiş olanın değerini (.value) alıyor ve bunu doğruca Uyarı kutusuna gönderiyor.
Fakat, HTML?den biliyorsunuz ki, SELECT etiketine MULTIPLE anahtar kelimesini koyarak, ziyaretçinin birden çok seçme yapmasına izin verebilirsiniz. Bu durumda “selectedIndex” işaretini kullanabilir miyiz? Hayır; bu bir değişken olduğuna göre sadece bir değer (seçilen ilk OPTION?ın sıra numarasını) tutacaktır. Fakat SELECT nesnesinin bir de “selected” özelliği vardır ki içinde seçilen bütün OPTION?ların numarası yazılıdır. Son kod örneğimizi bu kez şöyle değiştirelim ve sec02.htm adıyla kaydedelim.
<html> <head> <title>Seçme Listesi Ornegi</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1254"> <SCRIPT LANGUAGE = "JavaScript1.2"> function secDegeri(secilenIsim) { var liste = "" for (var i=0; i<secilenIsim.length; i++) { if (secilenIsim.options[i].selected) { liste += secilenIsim.options[i].text + "<p>" } } yeniPencere = window.open ("", "Seçtikleriniz", "height=200, width=200") yeniPencere.document.write("<H2>Şu şarkıları seçtiniz:</H2><P><P>") yeniPencere.document.write(liste) } </SCRIPT> </HEAD> <BODY> <FORM name="form1"> <p><SELECT NAME="sanatci" SIZE=4 MULTIPLE> <OPTION>Neset Ertas</OPTION> <OPTION>Zeki Müren</OPTION> <OPTION>Sezen Aksu</OPTION> <OPTION>Kayahan</OPTION> <OPTION>Mustafa Sandal</OPTION> <OPTION>Müşerref Tezcan</OPTION> </P> <input type=button value="Hangilerini seçtim?" onClick="secDegeri(this.form.sanatci)"> </FORM> </BODY> </HTML>
Burada seçilenlerin listesini yeni bir pencerede açtığımız belgeye yazdırıyoruz. Bu size, bir formun unsurlarını elde ettiğiniz listeyi daha sonraki bir sayfada, HTML unsuru olarak kullanabileceğinizi gösteriyor. Kodu kısaca irdelersek; fonksiyonumuz, for döngüsünün içindeki if döngüsü ile, kendisine ulaşan bilgi kümesinde “selected” olarak işaretlenenleri seçmekte ve bunların metnini (.text), liste değişkenine, aralarına <P> etiketi koyarak yazıyor.
Hakkı Öcal Javascript dersleri