|
Bir projemde ihtiyacım olduğunda Dynamic Drive' da bulduğum kodu bir örnek uygulama ile inceleyerek birbirleri ile bağlı combobox' ları nasıl yapacağımızı öğreneceğiz. Örneğin bana bölge seçtiğimde, ikinci bir listede o bölgedeki illeri seçmemi sağlayacak bir yapı gerekiyordu. Bunu iller ve ilçeler olarak da özelleştirip kullanabilirsiniz.
Bunun için Javascript kullanıyoruz.
Öncelikle aşağıdaki kod bloğunu <head> - </head> tagları arasına yerleştiriyoruz.
|
<script type="text/javascript">
/* This script and many more are available free online at
The JavaScript Source!! http://javascript.internet.com
Created by: Kiran Pai | http://www.codecoffee.com/ */
var Akdeniz = new Array("Adana", "Antalya", "Burdur", "Hatay", "Isparta", "Kilis", "Mersin", "Osmaniye");
var DoguAnadolu = new Array("Ağrı", "Ardahan", "Bingöl", "Bitlis", "Elazığ", "Erzincan", "Erzurum", "Hakkari", "Iğdır", "Kars", "Malatya", "Muş", "Tunceli", "Van");
var Ege = new Array("Afyonkarahisar", "Aydın", "Denizli", "İzmir", "Kütahya", "Manisa", "Muğla", "Uşak");
var Guneydogu = new Array("Adıyaman", "Batman", "Diyarbakır", "Gaziantep", "Mardin", "Siirt", "Şanlıurfa", "Şırnak", "Kahramanmaraş");
var IcAnadolu = new Array("Aksaray", "Ankara", "Çankırı", "Eskişehir", "Karaman", "Kayseri", "Kırıkkale", "Kırşehir", "Nevşehir", "Niğde", "Sivas", "Yozgat", "Konya");
var Karadeniz = new Array("Çorum", "Artvin", "Bartın", "Bayburt", "Bolu", "Amasya", "Düzce", "Giresun", "Gümüşhane", "Karabük", "Kastamonu", "Ordu", "Rize", "Samsun", "Sinop", "Tokat", "Trabzon", "Zonguldak");
var Marmara = new Array("İstanbul", "Bursa", "Çanakkale", "Edirne", "Bilecik", "Balıkesir", "Kırklareli", "Kocaeli", "Sakarya", "Tekirdağ", "Yalova");
function set_il() {
var select_bolge = document.myform.bolge;
var select_il = document.myform.il;
var selected_bolge = select_bolge.options[select_bolge.selectedIndex].value;
select_il.options.length=0;
if (selected_bolge == "Akdeniz"){
for(var i=0; i<Akdeniz.length; i++)
select_il.options[select_il.options.length] = new Option(Akdeniz[i]);
}
if (selected_bolge == "DoguAnadolu"){
for(var i=0; i<DoguAnadolu.length; i++)
select_il.options[select_il.options.length] = new Option(DoguAnadolu[i]);
}
if (selected_bolge == "Ege"){
for(var i=0; i<Ege.length; i++)
select_il.options[select_il.options.length] = new Option(Ege[i]);
}
if (selected_bolge == "Guneydogu"){
for(var i=0; i<Guneydogu.length; i++)
select_il.options[select_il.options.length] = new Option(Guneydogu[i]);
}
if (selected_bolge == "IcAnadolu"){
for(var i=0; i<IcAnadolu.length; i++)
select_il.options[select_il.options.length] = new Option(IcAnadolu[i]);
}
if (selected_bolge == "Karadeniz"){
for(var i=0; i<Karadeniz.length; i++)
select_il.options[select_il.options.length] = new Option(Karadeniz[i]);
}
if (selected_bolge == "Marmara"){
for(var i=0; i<Marmara.length; i++)
select_il.options[select_il.options.length] = new Option(Marmara[i]);
}
}
</script>
|
Daha sonra ihtiyacımız olduğu noktada aşağıdaki kod bloğunda göreceğiniz gibi bir yapı ile bu scripti kullanacağız.
<tr>
<td>Bölge : </td>
<td colspan="2">
<select name="bolge" onchange="set_il()">
<option value="Akdeniz">Akdeniz
<option value="DoguAnadolu">Doğu Anadolu
<option value="Ege">Ege
<option value="Guneydogu">Güneydoğu
<option value="IcAnadolu">İç Anadolu
<option value="Karadeniz">Karadeniz
<option value="Marmara">Marmara
</select>
</td>
</tr>
<tr>
<td>Şehir :</td>
<td colspan="2"><select name="il">
<option>------
</select></td>
</tr>
|
İşaretli noktada görüldüğü üzere set_il() fonksiyonunu ilk combobox' ın onchange state' inde kullanıyoruz. Böylece ilk listede bir seçim yapıldığında ikinci listenin içeriği daha önce tanımladığımız aynı isimli array ile eşleştiriliyor.
Lisans hakları gereği kodu kullanacağınız noktada programcısının adını ve linkini silmemeniz gerektiğini hatırlatmak isterim.
|
Dersleri RSS ile takip edin...
