Jquery ile İl İlçe Semt bağlantılı çalışma örneği
Bu çalışma için öncelikle elinizde Türkiye ‘deki bütün il, ilçe ve semt listelerine ihtiyacınız var.
Aşağıdaki linkte SQL dosyasıda mevcut, hatta burada anlattığım kodların çalışır durumları da 🙂
öncelikle oluşturduğumuz index.php dosyasına ekliyoruz.
<?php
include("conn.php");
?>
<!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" />
<meta name="viewport" content="width=device-width" />
<title>Emreder.com | İl İlçe Semt</title>
<script src="jquery-1.10.2.js" type="text/javascript"></script>
</head>
<body>
</td><td width="50%">
<form action="" name="g" method="post">
<table border="0">
<tr>
<td><label>İl </label></td><td>:</td><td><select id="il" name="il">
<option value="0">Şehir Seçiniz</option>
<?php
$sql=mysql_query("SELECT id,il_adi FROM il ORDER BY id ASC");
while($row=mysql_fetch_array($sql)){
?>
<option value="<?=$row['id']?>"><?=$row['il_adi']?></option>
<?php
}
?>
</select></td></tr>
<tr>
<td><label>İlçe </label></td><td>:</td><td>
<select name="ilce" id="ilce">
<option value="0">İlçe Seçiniz</option>
</select></td></tr>
<tr>
<td><label>Semt </label></td><td>:</td><td><select name="semt" id="semt">
<option value="0">Semt Seçiniz</option>
</select></td></tr>
<tr>
<td colspan="3">
<center><label><input type="submit" name="gonder" value="Giriş"></label></center></td></tr></table>
<script src="selectchained.js" type="text/javascript"></script>
<script>
$("#ilce").remoteChained("#il", "ililce.php");
$("#semt").remoteChained("#ilce", "ililce.php");
</script>
</body>
</html>
insert edilen il, ilçe ve semt ‘lerin database bağlantısını da aşağıdaki kod ile conn.php ‘ye atabilirsiniz.
<?php
@session_start();
$baglan=mysql_connect("localhost","root","");
if(!$baglan){
die('Bağlantı Hatası:' . mysql_error());
}
$vt_sec=mysql_select_db("ililce",$baglan);
if(!$vt_sec){
die("Veritabanı Hatası:".mysql_error());
}
@mysql_query("SET NAMES 'utf8'");
@mysql_query("SET CHARACTER SET 'utf8'");
@mysql_query("SET character_set_connection = 'utf8_turkish_ci'");
?>
tabi birde ililce.php var index.php de script bloğunun arasını incelediğiniz zaman göreceksiniz. İl ilçe ‘den sonra yapılan seçimlerde ililce.php dosyası çalıştırılıyor ve GET yöntemiyle bu select-option durumlarda value değerleri neyse ililce.php ‘de ki sorgularda bu durumlara göre listeleme yapılıyor.
<?php
include("conn.php");
if(isset($_GET['il'])){
$il=(int)$_GET['il'];
if($il>0){
$dk=mysql_query("SELECT * FROM ilce WHERE il_id='".$il."' order by slug");
$list='{"0":"Seçiniz",';
while($ilr=mysql_fetch_array($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=mysql_query("SELECT * FROM semt WHERE ilce_id='".$ilce."' order by semt_adi_kucuk");
$list='{"0":"Seçiniz",';
while($ilr=mysql_fetch_array($dk)){
$list.='"'.$ilr['id'].'":"'.$ilr['semt_adi'].'",';
}
$list=substr($list,0,-1);
$list.="}";
echo $list;
}
}
?>
indirdiğiniz dosyanın içinde yer alan selectchained.js dosyası ise selectedindex kısmını yapıyor, yani il ve ilçe kısmında yaptığınız tıklamadan sonra ililce.php ‘ye GET yoluyla gönderilen value hareketini gerçekleştirir.
Ve en önemli dosyada jquery-1.10.2.js budur, jQuery kütüphanesi ve bence en temel yapı taşı 🙂
Umarım işinizi görmüştür, yorum yapmayı unutmayın. Güzel kod ‘lu günler.
uygulamayı indirmek için tıklayınız.
Bağlantılı Konular
WP ‘de resim yüklerken karşılaşılan hata →
Php Warning: session_start(): Cannot send session cookie hatası →
PHP ‘de Kütüphane Sistemi →
