23 Kasım 2012 Cuma

PHP:jQuery: Chained Select – İl & İlçe & Semt & Mahalle Seçimi

Yazının daha evvelki versiyonunda Ajax ile dinamik şehir ve ilçe seçimi yapmıştık . Ziyaretçilerden gelen istek üstüne , bu versiyonda Şehir > İlçe > Semt > Mahalle seçimi sistemini paylaşıyorum .

 

index.php kodları



[php]
<?php
@ob_start();
@session_start();
require_once("mysql.php");  / uygulamamızın veritabanı işlemleri için gerekli olan bağlantı dosyası
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="tr-TR">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<title>Serpito - Ajax Chain Select - İl ilçe seçimi</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<style>
select { width:150px; line-height:22px; padding:4px; background-color:#F8F8F8; border:1px solid #F8EBDC; float:left; margin-right:15px;}
select option{line-height:22px;}
</style>

</head>
<body>
<div id="wrapperpub">
<div id="header">
<div style="width:550px; float:left;">
<h1 id="blog-title"><a href="http://www.serpito.com/" title="Serpito">Serpito</a></h1>
<div>Güncel Teknoloji ve Yazılım Blogu </div>
</div><!-- dp100 -->
<div style="width:300px; float:right;">
<a style="font:2.4em/1.5 museo-sans-500,helvetica,arial,sans-serif; color:#FFF;" href="http://www.serpito.com/php-ajax-chained-select-il-ilce-secimi/">Yazıya geri dön &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;not;</a>
</div>
</div><!--  #header -->
</div><!--  #wrapperpub -->

<div></div>

<p><h2 style="color:#FFF; font:2.6em/1.5 museo-sans-500,helvetica,arial,sans-serif;" align="center">Chained Select Uygulaması  - İl &amp;amp;amp;amp;amp;amp;amp;amp;amp;amp;amp; İlçe Seçimi</h2></p>
<div id="wrapper" align="center" style="width:980px; min-height:200px; margin-top:10px; font-family:museo-sans-500,helvetica,arial,sans-serif;">
<div id="container" style="width:940px;">

<div style="margin-left:30%;">
<select id="il" name="il">
<option value="0">Şehir Seçiniz</option>
<?php
$sql=$db->q("SELECT id,il_adi FROM il ORDER BY id ASC");
while($row=$db->fassoc($sql)){
?>
<option value="<?=$row['id']?>"><?=$row['il_adi']?></option>
<?php
}
?>
</select>

<select name="ilce" id="ilce">
<option value="0">İlçe Seçiniz</option>
</select>

</div>

</div>
<div style="clear:both;"></div>
</div>

<script src="selectchained.js" type="text/javascript"></script>
<script>
$("#ilce").remoteChained("#il", "smtr.php");
$("#semt").remoteChained("#ilce", "smtr.php");
$("#mahalle").remoteChained("#semt", "smtr.php");
</script>

<?php $db->close(); ?>
</body>
</html>

[/php]

index.php kodlarından anlaşılacağı üzere, uygulamanın kullandığı jQuery plugin dosyası : selectchained.js

“#il”,“#ilce”, “#semt”  select elementleri seçildiğinde remoteChained fonksiyonu smtr.php dosyası ile etkileşim kurar.

2. Adım   smtr.php


<?php
require_once("mysql.php");

if(isset($_GET['il'])){

$il=(int)$_GET['il'];

if($il>0){
$dk=$db->q("SELECT `id`,`ilce_adi` FROM `ilce` WHERE `il_id`='$il' ORDER BY `id` ASC");
$list='{"0":"Seçiniz",';
while($ilr=$db->fassoc($dk)){
$list.='"'.$ilr['id'].'":"'.$ilr['ilce_adi'].'",';
}
$list=substr($list,0,-1);
$list.="}";

echo $list;
}
}
else if(isset($_GET['ilce'])){
$ilce=(int)$_GET['ilce'];

if($ilce>0){
$dk=$db->q("SELECT `id`,`semt_adi` FROM `semt` WHERE `ilce_id`='$ilce' ORDER BY `id` ASC");
$list='{"0":"Seçiniz",';
while($ilr=$db->fassoc($dk)){
$list.='"'.$ilr['id'].'":"'.$ilr['semt_adi'].'",';
}
$list=substr($list,0,-1);
$list.="}";

echo $list;
}
}
else if(isset($_GET['semt'])){
$semt=(int)$_GET['semt'];

if($semt>0){
$dk=$db->q("SELECT `id`,`mahalle_adi` FROM `mahalle` WHERE `semt_id`='$semt' ORDER BY `id` ASC");
$list='{"0":"Seçiniz",';
while($ilr=$db->fassoc($dk)){
$list.='"'.$ilr['id'].'":"'.$ilr['mahalle_adi'].'",';
}
$list=substr($list,0,-1);
$list.="}";

echo $list;
}
}

$db->close();
?>




Kaynak: http://www.serpito.com/jquery-chained-select-il-ilce-semt-mahalle-secimi/#comment-27485

Hiç yorum yok:

Yorum Gönder