alexa  Menu
JSON-ve-jQuery-ile-dinamik-il-ilce-uygulamasi

JSON ve jQuery ile dinamik il ilçe seçme uygulaması

  22.03.2018 ,   8 yorum ,   9.576 kez okundu.

Web uygulaması geliştirmeye yeni başlayanlar sık sık bu soruyu sordukları için blogda bu konunun da bulunmasını istedim. Türkiye il ve ilçeleri bilgilerini kullanarak yapmaya çalıştım. Temel olarak mantığını anlattım yani siz istediğiniz gibi kullanabilirsiniz tabiki.

Buarada kullandığım verileri Volkan Şentürk`e aittir. Kendisini tanımıyorum ama github hesabında public olarak paylaştığı için eğitim amaçlı kullanmakta bir sıkıntı görmedim :).

Gelelim uygulamamıza. Uygulamayı hazırlarken Bootstrap kullandım. O yüzden paylaşacağım kodlarda bootstrap sınıflarını görebilirsiniz. Öncelikle HTML kodlarımızı bir hazırlayalım:

<div class="container">
    <div class="row">
        <div class="col-md-12"><h1>İl ilçe</h1></div>
        <div class="col-md-3">
            <select name="il" id="il" class="form-control">
                <option value="">Seçin...</option>
            </select>
        </div>

        <div class="col-md-3">
            <select name="ilce" id="ilce" class="form-control" disabled="disabled">
                <option value="">Seçin...</option>
            </select>
        </div>
    </div>
</div>

Burada gördüğünüz gibi iki adet select kullandık. Yani il ve ilçelerin görüneceği alan. Şimdi az önce de söylediğim gibi Volkan Şentürkün github hesabındaki verileri kullandım ve bu veriler JSON formatındaki dosyalardır. Yani yapmam gereken JSON dosyasındaki verileri okuyarak bu verileri ilişkilendirmek olacak.

Şimdi hesapta iki adet JSON dosyası halinde olduğu için önce il-bolge.json dosyasından il isimlerini çekerek birinci select elemanına ilave edeceğim:

$.getJSON("il-bolge.json", function(sonuc){
        $.each(sonuc, function(index, value){
            var row="";
            row +='<option value="'+value.il+'">'+value.il+'</option>';
            $("#il").append(row);
        })
    });

jQuery $.getJSON fonksiyonunu kullanarak önce json dosyasından verileri aldım ve daha sonra bu fonksiyon içerisinde verileri $.each fonksiyonu yardımıyla tek tek gezerek id`si il olan select elemanına ilave ettim. Sonuç:

bolge-listesi

Şimdi il seçtiğimizde seçilen il ismini alarak diğer JSON dosyasını (il-ilce.json) okumamız ve kontrol yazmamız gerekiyor. Kontrol etmemiz gereken kısım il ismi olacak:

$("#il").on("change", function(){
        var il=$(this).val();
        $("#ilce").attr("disabled", false).html("<option value=''>Seçin..</option>");
        $.getJSON("il-ilce.json", function(sonuc){
            $.each(sonuc, function(index, value){
                var row="";
                if(value.il==il)
                {
                    row +='<option value="'+value.ilce+'">'+value.ilce+'</option>';
                    $("#ilce").append(row);
                }
            });
        });
    });

Burada gördüğünüz gibi, id`si il olan eleman değiştiğinde, yani bir il seçildiğinde il ismini tutarak, yine yukarıda olduğu gibi JSON dosyasından aldığımız bilgileri $.each fonksiyonu ile tek tek gezdiğimizde tuttuğumuz il ismini kontrol ediyoruz. Eğer bulunduğumuz satırdaki il ismi ile bizim tuttuğumuz il ismi eşitse o zaman buna bağlı ilçeyi ilceler elemanına ekle diyoruz. Bu kadar 🙂

Uygulamanın hazır halini github hesabımdan indirebilirsiniz. Ayrıca bu paylaşıma ait videoyu izlemek isterseniz online öğren blogumu ziyaret edebilirsiniz.


8 yorum yapılmış

    A

    Teşekkürler.

    02.03.2019, 21:15:52

    emrah altuner

    Merhaba ahocam eliize sağlık ben il-ilçe seçtikten sonra örnek veriyorum yazı gelsin istiyorum sube gibi onu nasıl yapabilirim

    20.11.2019, 13:53:30

    bahadır gurp

    bir sayfada iki ayrı yerde kullandığım zaman 2.ci kullandığım çalışmıyor nedendir acaba

    22.11.2019, 15:26:18

    Hakkı Maden

    Elinize emeğinize sağlık. Yararlı paylaşımınız için teşekkürler. Sağlıcakla.

    04.04.2020, 17:12:23

    veysel aydoğdu

    Merhaba bu paylaşımınızın şuanda ne kadar değerli olduğunu anlatabilecek bir kelime yok 🙂
    öncelikle elinize sağlık şuanda bu yaptığınız scripti kullanmaya başladım üye kayıt formu için yalnız ben birde bunun önüne ülke seçeneği eklemek istiyorum bu konuda yardımcı olma şansınız var mı?

    03.08.2020, 21:09:34

    Veysel Aydoğdu

    aslında basit bir soru sormuştum ülke seçeneği eklemekle ilgili ama yorumum silindi sıkıntı yok sadece teşekkürüm kalsın bu paylaşımınız için.

    03.08.2020, 21:21:13

      Anar SAMADOV

      merhaba, yorumunuz silinmedi, sadece onaylandıktan sonra gösteriliyor yorumlar. Ülke konusuna gelince, aslında mantık aynı, ülkeleri bir jsonda tutup, ülke kodları eklemeniz lazım, ülke kodlarını da ait olduğu şehir kodlarının yanında tutmanız lazım mesela
      u1-Türkiye
      u2-Amerika

      s1-Ankara
      -countryCode-u1

      s2-İstanbul
      -countryCode-u1

      s3-New York
      -countryCode-u2

      bu şekilde.

      04.08.2020, 8:41:49

Yorum yapın..

isim yerine gerçek isim ve soyisim yazılmadan yapılan yorumlar kesinlikle onaylanmıyor bilginiz olsun.


%d blogcu bunu beğendi: