Ajax ile Çoklu Selectbox Seçimi Yaptırma

kategori:

ajax-logoBir formdan gelen selectbox id sine göre başka bir dosyada oluşan kodları ekrana yazdıracağız. İşlem normal jQuery işlemidir. jQuery kullandığımız için jQuery dosyasını ya dosya olarak kaydetmeliyiz yada jQuery resmi sayfasından çekmeliyiz. Bu işlemi yaptıktan sonra deneme.php adında bir dosya oluşturun.

<title>jQuery SelectBox Çalışması @bercanozcan</title>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript"> function liste1(GonderilenId) {
$('#liste1').load('sonuc.php?id='+GonderilenId );
}
</script>
<select id="veri" name="select" onchange="liste1(this.value)">
<option>---Seçiniz----</option>
<option value="1">Seçim 1</option>
<option value="2">Seçim 2</option>
<option value="3">Seçim 3</option>
</select>
<div id="liste1"></div>

Burada Seçimden sonra selectbox oluşuyor. Bu dosyamız da jQuery çalıştıktan sonra liste1 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 islem.php ye gönderdik. Şimdi bir de islem.php dosyası oluşturun.
islem.php içeriği;

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

Kaydedip kapatalım ve local üzerinden deneme.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 eğer;

<script type="text/javascript"> function list1(GonderilenId) {
$('#list').load('islem.php?id='+GonderilenId );
} </script>

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


Yorumlar

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir