Ajax ile Çoklu Selectbox Seçimi Yaptırma

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.

Otomatik Açılan jQuery ile Lightbox

Başlıyoruz

Öncelikle Colorbox Lightbox JS ve CSS kütüphanelerini include ediyoruz (Gerekli dosyaları yazı sonundaki linkten indirebilirsiniz.)

<!-- Color Box CSS -->
<link media="screen" rel="stylesheet" target="_blank" href="css/colorbox.css" />
<!-- Style For the Subscription Box -->
<link media="screen" rel="stylesheet" target="_blank" href="css/popup.css" />
<script language="javascript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"type="text/javascript"></script>
<script language="javascript" src="js/colorbox.js"></script>

JS Kodları

$("document").ready(function (){
       // load the overlay
        if (document.cookie.indexOf('visited=true') == -1) {
            var fifteenDays = 1000*60*60*24*15;
            var expires = new Date((new Date()).valueOf() + fifteenDays);
            document.cookie = "visited=true;expires=" + expires.toUTCString();
            $.colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
        }
        
        $(".open_popup").colorbox({width:"580px", inline:true, href:"#subscribe_popup"});
 });

HTML Kodları

Click here to open the popup

Never miss an update from Papermashup

Get notified about the latest tutorials and downloads.

Subscribe by Email

Get alerts directly into your inbox after each post and stay updated.

Subscribe

OR

Subscribe by RSS

Add our RSS to your feedreader to get regular updates from us.

Subscribe