DOM nesnelerinden INPUT (selectbox) nesnesine ve özelliklerine kısaca değineceğiz, ve bu özelliklerin kullanımına dair küçük bir uygulama yapacağız.
Input (selectbox) özellikler
- disabled: Sadece okunabilirlik (kutu içine yazı yazılmasına izin verilmez)
- form: //İçersinde bulunduğu form nesnesinin ismini(name) geri döndürür.
- length: //Kaç adet option seçeneği olduğunu verir
- multiple: //Çoklu seçenek durumu
- selectedIndex: //Seçimin indeks değeri.
- size: //Ekranda kaç satır seçenek gösterileceğini belirtir.
Input (selectbox) Metodlar
- add(): //Select nesnesine yeni seçenekler ekler.
- remove(): //Select nesnesinden seçenek kaldırır.
Uygulama:
Ekle butonu ile yeni bir değer ekliyoruz, Kaldır butonuyla seçili değeri siliyoruz, Option Sayısı ile de select içindeki geçerli option adetini öğreniyoruz:
HTML yapısı:
<table>
<tr><td>Yeni Değer:</td><td><input type="text" id="yeniDeger" /></td>
<td>
<select id="konular">
<option value="PHP">PHP</option>
<option value="Mysql">Mysql</option>
<option value="Java">Java</option>
</select>
</td><td> </td>
</tr>
<tr><td><input type="button" value="Ekle" onclick="addOpt();" /></td>
<td><input type="button" value="Kaldır" onclick="removeOpt();" /></td>
<td><input type="button" value="Option Sayısı" onclick="optNumber();" /></td>
</tr>
</table>
Javascript kodları:
<script type="text/javascript">
function addOpt()
{
var opt = document.createElement("option");
document.getElementById("konular").options.add(opt);
opt.text = document.getElementById('yeniDeger').value;
opt.value = document.getElementById('yeniDeger').value;
}
function removeOpt()
{
var silSelect=document.getElementById("konular");
silSelect.remove(silSelect.selectedIndex);
}
function optNumber()
{
alert(document.getElementById("konular").options.length);
}
</script>
Açıklamalar:
- 2. "addOpt()" fonsiyonunda:"createElement" metoduyla sayfada bir adet "option" oluşturuyoruz, henüz nereye ekleyeceğimiz belli değil
- 5. "konular" id'li selectbox'a oluşturduğumuz option'ı ekliyoruz
- 6. "yeniDeger" id'li "input-text" kutusundaki değeri yeni eklediğimiz option'a görünür yazı(text) olarak atıyoruz
- 7. Yeni option için "value" değerini atıyoruz
- 9. "removeOpt" fonsiyonunda:"konular" id'li selectbox'ı silSelect değişkenine atıyoruz
- 12. Seçilen index verisini selectbox içinden siliyoruz
- 14. "optNumber()" fonsiyonunda:"konular" id'li selectbox'ın içindeki option sayısını "length" özelliğiyle uyarı mesajı olarak gönderiyoruz
Kolay gelsin, görüşmek üzere...
