Ajax ile Çoklu Selectbox Seçimi Yaptırma, jQuery Selectbox Seçimi

Bu yazımda ajax kullanarak selectbox lar arasında ilişkisel seçim yapma ve selectbox taki değer seçildiği an diğer selectbox ların oluşmasını nasıl sağlayacağımızı anlatacağım. Bir formdan gelen selectbox id ye göre başka bir dosyamızda oluşan kodları ekrana vasacağız işlem normal jQuery işlemidir. yapacağımız sistem jQuery tabanlı olacağından jQuery dosyasını indirmeniz gerekmektedir. jQuery dosyasını jQuery resmi sitesinde bulabilirsiniz veya dilerseniz Bu linkten Bu Linkten jQuery indirebilirsiniz ilk olarak indirdiğimiz jquery.js dosyasını rar dan çıkartın ve çalışacağımız dizine atın. Daha sonra test.php adında bir php dosyası oluşturun

Test.Php içeriği:

<title>jQuery SelectBox Örneği</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript"> function CityList(GelenId) {
$('#CityList').load('sonuc.php?id='+GelenId );
}
</script>
<select id="veri" name="select" onchange="CityList(this.value)">
<option>---Seçiniz----</option>
<option value="1">Seçenek 1</option>
<option value="2">Seçenek 2</option>
<option value="3">Seçenek 3</option>
</select>
<div id="CityList"></div>

Burada Seçimden sonra selectbox oluşuyor. Bu dosyamız da jQuery çalıştıktan sonra CityList adında bir fonksiyon oluşturduk. ve Çalıştıracağımız selectbox un onchange olayında çalıştırdık ve value değerini sonuc.php ye gönderdik. Şimdi bir de sonuc.php dosyası oluşturun.
Sonuc.php içeriği:

<?php
$id = $_GET['id'];
if($id==1){
echo '<select name="giden">';
echo '<option value="1">Bu 1.Seçenek İçin 1</option>';
echo '<option value="2">Bu 1.Seçenek İçin 2</option>';
echo '</select>';
}elseif($id==2){
echo '<select name="giden">';
echo '<option value="1">Bu 2.Seçenek İçin 1</option>';
echo '<option value="2">Bu 2.Seçenek İçin 2</option>';
echo '</select>';
}elseif($id==3){
echo '<select name="giden">';
echo '<option value="1">Bu 3.Seçenek İçin 1</option>';
echo '<option value="2">Bu 3.Seçenek İçin 2</option>';
echo '</select>';
}else{
echo "Lütfen Seçenek Seçin";
} ?>

Kaydedip kapatalım. ve local üzerinden test.php dosyamızı çalıştıralım. Burada dikkat edilmesi gereken husus 2. select sonuç dosyasında oluşmaktadır. yani olay aslında standart bir jQuery value gönderme işlemdir ikinci değere göre bir selectbox daha oluşturmak gerekirse şayet

<script type="text/javascript"> function CityList(GelenId) {
$('#CityList').load('sonuc.php?id='+GelenId );
} </script>

bu kodumuzda bulunan CityList fonksiyon isimlerini değiştirerek aynı şekilde farklı bir sonuc.php ye gönderim yapabilir. aynı sonuc.php deki gibi 3. bir selectbox u oluşturabilirsiniz.