JQuery ile İl İlçe Semt

 bcakir
 18 Ocak 2012

Merhaba arkadaşlar, bu yazımda daha önce anlattığım JQuery ile Marka Model uygulamasının üçlüsünü yani İl İlçe ve Semt olanını yapacağız. Bu uygulamamızı önce yazdığım uygulamanın üzerinde geliştireceğim için onu incelemenizde yarar var. Ayrıca, bu uygulamada veritabanı kullanmayacağım ama bu türdeki, çok veri kullanmanız gereken uygulamalara veritabanını bağlamayı daha önce sizler için yazdığım yazıyı kullanarak kolayca yapabilirsiniz. Uygulamamız için gerekli bilgileri verdiğime göre artık geliştirebiliriz.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-9" />
<title>JQuery ile İl İlçe Semt</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function ilceleri_al(){
    //semtin kaldirilmasi
    $("#semti").html('');
    //markanın alınması
    il=$("#il").val();
    //seçilen ilin göndermesi
    $.ajax({
        type:'POST',
        url:'ilce.php',
        data:'il='+il,
        success: function(msg){
            //dönen ilçelerin göstermesi
            $('#ilcesi').html(msg);
        }
    });
}

function semtleri_al(){
    //markanın alınması
    ilce=$("#ilce").val();
    //seçilen ilcenin göndermesi
    $.ajax({
        type:'POST',
        url:'semt.php',
        data:'ilce='+ilce,
        success: function(msg){
            //dönen semtlerin gösterilmesi
            $('#semti').html(msg);
        }
    });
}
</script>
<style>
select {width: 150px}
#ili {display: inline}
#ilcesi {display: inline}
#semti {display: inline-block}
</style>
</head>
<body>
<div id="ili">
<select id="il" title="İli Seçiniz" onchange="ilceleri_al()">
<option value="trabzon">Trabzon</option>
<option value="ankara">Ankara</option>
<option value="istanbul">İstanbul</option>
</select></div>
<div id="ilcesi"></div>
<div id="semti"></div>
</body>
</html>

Yukarıda selectboxlarımızı koyduk ve JQuery ile bu dorm elemanlarımızdan aldığımız değerlerimizi uygun Php betiklerine gönderdik. Şimdi ilçelerimizi alacağımız ilce.php sayfamızı yapalım.

<select id="ilce" title="İlçeyi Seçiniz" onchange="semtleri_al()">
<?php
//ilce.php olarak kaydedin
header("Content-Type: text/html; charset=iso-8859-9");
if($_POST['il']=='trabzon'){
?>
	<option value="surmene">Sürmene</option>
	<option value="arakli">Araklı</option>
	<option value="of">Of</option>
<?php }elseif($_POST['il']=='ankara'){ ?>
	<option value="yuzyil">100.Yıl</option>
	<option value="bahcelievler">Bahçelievler</option>
<?php }elseif($_POST['il']=='istanbul'){ ?>
	<option value="gungoren">Güngören</option>
	<option value="avcilar">Avcılar</option>
<?php } ?>
</select>

Yukarıda ilçelerimizi aldığımız Php betiğimizi yaptık. Siz bunları elle girmek yerine veritanbanınızdan çekerseniz daha kolay ve fonksiyonel olur. Son olarak semt.php sayfamızı da yapalım.

<select id="semt" title="Semti Seçiniz">
<?php
//semt.php olarak kaydedin
header("Content-Type: text/html; charset=iso-8859-9");
if($_POST['ilce']=='surmene'){
?>
	<option value="aksu">Aksu</option>
	<option value="yemisli">Yemişli</option>
<?php }elseif($_POST['ilce']=='arakli'){ ?>
	<option value="merkez">Merkez</option>
	<option value="sahil">Sahil</option>
<?php }elseif($_POST['ilce']=='of'){ ?>
	<option value="solakli">Solaklı</option>
	<option value="liman">Liman</option>
<?php } ?>
</select>

Yukarıda semtleri aldığımız Php sayfamızı da yaptık. Fakat ben bütün ilçelerin semtlerini girmedim, sadece Trabzon’unkilerini girdim. Tavsiye olarak bu uygulamayı veritabanına bağlamanızda yarar var diyorum ve böylece bir yazımızın daha sonuna geliyorum.

 8.756 Okunma

Bu yazıya 20 yorum yapılmış.

  1. Çok faydalı güzel mükemmel bir makale olmuş çok beğendim.Klavyenize sağlık allah sizi başımızdan eksik etmesin 😀 Semt kısmına url nasıl ekleyecez o zaman tadından yenmez bir olay olur.

    • Daha önce anlattığım JQuery ile Marka Model uygulamasının son kısmını inceleyin. Aynı soru gelmişti, yazının sonuna ekleme yapmıştım.

  2. bu uygulamayı yaptımda internet explorerde hata veriyor çlaışmıyor mozilla firefox ve chormede gayet güzel çalışmakta internet explorerde de nasıl çalıştırabiliriz.

  3. var değişkenlerini tanımla o zman iexplorerdede çalışır.Ben yaptım çalıştı ancak tablonun biri aşağı indi onu nası yukarda sabitleyecem bilmiyorum.

  4. hocam öncelikle değerli paylaşımınız için çok teşekkür ederim.. while döngüsü kullanarak veritabanındaki illeri, ilçeleri ve semtleri yazdırdım.. döngünün sonunda echo içine option value değeri olarak plaka değişkeni kullandım plaka değişkenini de veritabanından çektiğim il plaka kodlarına eşitlemiştim.. semt phpde de gelen plaka değeri 35e eşitse izmirin ilçelerini göster dedim yine while döngüsüyle…. ilan girişlerinde veritabanına yazdırmak için kullanacağım ilanekle.phpde echo _post metoduyla gelen illeri yazdırdığımda(a php deki select kısmında name=iller tanımladım) il isimleri değil plaka kodları çıkıyor :((.. value değerini sildiğimde il isimleri geliyor ama bu sefer de ilçe ve semt selectleri boş görünüyor… sorunumu iyi ifade edemedim farkındayım ama umarım anlarsınız.. kodları yazsam görünür mü nasıl yazmam gerekir bilemedim:((… yardımcı olabilirseniz çok sevinirim..

    • kısmını hallettim 🙂 sorunun güncel şekli şu:
      il seçiminde izmiri seçtim.. ilce.php ye postla 35 geldi.. if postla gelen 35e eşitse deyip while döngüsünün koşul kısmına
      row=mysql_fetch_array(ilceler tablosuna eşitlenen değişken) deyip çalıştırdık.. şu aşamada sorun yok izmir seçince ilçeler açılıyo..
      soru: illa if ya da switch kullanarak postla gelen değer 35’se, postla gelen değer 36’ysa şeklinde 81 defa tekrarlamak zorunda mıyım? Daha basit bi yolu muhakkak vardır ama ne denesem yapamadım.. her il için tek tek if elseif yapmak zorunda kalırsam semtleri düşünmek bile korkutucu :).. önemli olan sıkıntım bu, bi de daha az önemli olan var ki o da veri tabanında ilçeler tablosuna bağlandık where id kullanıp plakası 35 olanlar dersem postla gelen 55 olursa saçma bi durum oluyo.. where id kullanmazsam bütün ilçeler listeleniyo.. ne yapabilirim lütfen yardım.. bi süredir iyi gidiyodum bi haftadır bu aşamada takıldım kaldım 🙁

  5. arkadaşlar önceki yazdıklarımı boşverin hallettim hepsini ama buna lütfen bilen biri cevap yazsın… ilçe ve semt kategorilerinin kaldırılmaması için ne yapabilirim.. yani il seçilmeden de ilçe ve semt seçenekleri görünsün istiyorum.. ola ki kullanıcı unutur da gönderirse formu bi dünya hata mesajı çıkıyo görünür halde olursa en azından hepsi diye bi seçenek koyarım en üste..

    • Uygulamadan birbirini çağırma işlemini kaldır. Hepsini sayfa açılınca, direk çağır. Ama hangi il – hangi ilçeye bağlı falan gibi sıkıntılar ile karşılaşacaksın bu seferde.

  6. İyi günler. Öncelikle paylaşımınız için çok teşekkür ederim. Çok işime yarayacağını umuyorum fakat dördüncü comboboxa ihtiyacım var. Ne kadar uğraştıysam da yapamadım. Yardımcı olabilir misiniz?

    • Yukarıdaki şekilde aynısı gibi bir JQuery fonksiyonunu kopyalayıp ismini değiştiriyorsunuz (gerekli bütün yerlerdeki isimlerini) ve verileri alacağınız 1 tane daha Php sayfası yapıyorsunuz.

  7. Dördüncü combobox’ı oluşturdum fakat bu defa veritabanına kaydetmekte sıkıntı yaşıyorum. Anasayfamda yalnızca ilk combobox gözüktüğü için yalnızca birinciden gelen veriyi kaydediyo, diğerlerini boş kaydediyo 🙁

    • İyi günler. Bu çalışmayı değişken konusunda sıkıntı yaşamamak için tek sayfada yapmaya çalıştım fakat yapamadım 🙁 İnternette yaptığım araştırmalarım da sonuçsuz kalıyo. Yardımınıza ihtiyacım var.

  8. Meraba elinize sağlık, explorer de çalışmıyor acaba bunu düzeltme imkanımız var mı kodlama dilim yok diyecek kadar az teşekkürler

  9. Merhaba

    Hocam Peki Veritabanına Form Ögelerine Kayıt Ettirdiğimizde İlçelerin value Kısımını Yansıtmak Yeterki Olacakmı

  10. Veritabanına nasıl bağlanıp veri döngüsü oluşturabiliriz.

  11. Çok yardımcı oldunuz en zor anlarda, teşekkürler.

  12. Teşekkürler bu örneği çok aradım sağolun. Ama ilçesi ve semti bilgilerin id değerleri veritabanına nasıl kaydedebiliriz. Bu konuda bilgi verebilir misiniz, burada takıldım?

  13. Kardeşim eline sağlık harika
    Ancak benim aklıma takılan bir soru;
    diyelim ki semtlerdeki sokak isimlerini input kutucuğuna yazarak arama yapmak istesem…
    Bunu nasıl yapabiliriz?

Yazı hakkında görüşlerinizi belirtmek istermisiniz?

Daha fazla JQuery, Php
Kapat