SEO (Arama Motoru Optimizasyonu) Mikro İnteraktif ÜCRETSİZ - Google Play'den İndirin

JavaScript ile İl, İlçe, Mahalle Örneği ve JSON Kullanımı

Bu makalemizde birbirine göre değişen select kutuları ve her değişim olayında uygun koşula göre kayıtların ilgili selecte doldurulması işlenecektir.

Makalemizi "İl, İlçe ve Mahalle" seçimlerine göre yapacağımızı belirtmekte fayda var. Ayrıca veritabanı kullanmadan direkt olarak bir JSON dosyasından ilgili kayıtları kullanacağız.

Öncelik olarak sehirler.json adlı dosyamızı oluşturup birkaç tane şehir girelim.
sehirler.json
[
    {"sehir_ID":"1","sehir_adi":"Adana"},
    {"sehir_ID":"2","sehir_adi":"Adıyaman"},
    {"sehir_ID":"3","sehir_adi":"Afyon"},
    {"sehir_ID":"4","sehir_adi":"Ağrı"}
]

Bu şehirlere karşılık uygun ilçeler oluşturalım.
ilceler.json
[
    {"ilce_ID": "1", "sehir_ID":"1","ilce_adi":"Yüreğir"},
    {"ilce_ID": "2", "sehir_ID":"1","ilce_adi":"Seyhan"},
    {"ilce_ID": "3", "sehir_ID":"1","ilce_adi":"Ceyhan"},
    {"ilce_ID": "4", "sehir_ID":"1","ilce_adi":"Çukurova"},
    {"ilce_ID": "5", "sehir_ID":"1","ilce_adi":"Sarıçam"},
    {"ilce_ID": "6", "sehir_ID":"1","ilce_adi":"Kozan"},
    {"ilce_ID": "7", "sehir_ID":"1","ilce_adi":"Feke"},
    {"ilce_ID": "8", "sehir_ID":"2","ilce_adi":"Besni"},
    {"ilce_ID": "9", "sehir_ID":"2","ilce_adi":"Çelikhan"},
    {"ilce_ID": "10", "sehir_ID":"2","ilce_adi":"Gerger"},
    {"ilce_ID": "11", "sehir_ID":"2","ilce_adi":"Gölbaşı"},
    {"ilce_ID": "12", "sehir_ID":"2","ilce_adi":"Kâhta"},
    {"ilce_ID": "13", "sehir_ID":"2","ilce_adi":"Samsat"},
    {"ilce_ID": "14", "sehir_ID":"2","ilce_adi":"Sincik"},
    {"ilce_ID": "15", "sehir_ID":"3","ilce_adi":"Başmakçı"},
    {"ilce_ID": "16", "sehir_ID":"3","ilce_adi":"Bayat"},
    {"ilce_ID": "17", "sehir_ID":"3","ilce_adi":"Bolvadin"},
    {"ilce_ID": "18", "sehir_ID":"3","ilce_adi":"Çay"},
    {"ilce_ID": "19", "sehir_ID":"3","ilce_adi":"Çobanlar"},
    {"ilce_ID": "20", "sehir_ID":"3","ilce_adi":"Dazkırı"},
    {"ilce_ID": "21", "sehir_ID":"4","ilce_adi":"Diyadin"},
    {"ilce_ID": "22", "sehir_ID":"4","ilce_adi":"Doğubayazıt"},
    {"ilce_ID": "23", "sehir_ID":"4","ilce_adi":"Eleşkirt"},
    {"ilce_ID": "24", "sehir_ID":"4","ilce_adi":"Hamur"},
    {"ilce_ID": "25", "sehir_ID":"4","ilce_adi":"Patnos"},
    {"ilce_ID": "26", "sehir_ID":"4","ilce_adi":"Taşlıçay"},
    {"ilce_ID": "27", "sehir_ID":"4","ilce_adi":"Tutak"}
]

İlçeler de oluştuğuna göre bu ilçelere ait json dosyası oluşturup biraz mahalle ekleyelim.
mahalleler.json
[
    {"mahalle_ID": "1", "sehir_ID":"1", "ilce_ID": "2", "mahalle_adi":"2000 Evler Mahallesi"},
    {"mahalle_ID": "2", "sehir_ID":"1", "ilce_ID": "2", "mahalle_adi":"Ahmet Remzi Yüreğir Mahallesi"},
    {"mahalle_ID": "3", "sehir_ID":"1", "ilce_ID": "2", "mahalle_adi":"Akkapı Mahallesi"},
    {"mahalle_ID": "4", "sehir_ID":"1", "ilce_ID": "2", "mahalle_adi":"Alidede Mahallesi"},
    {"mahalle_ID": "5", "sehir_ID":"1", "ilce_ID": "2", "mahalle_adi":"Bahçelievler Mahallesi"},
    {"mahalle_ID": "6", "sehir_ID":"1", "ilce_ID": "6", "mahalle_adi":"Gökgöz Mahallesi"},
    {"mahalle_ID": "7", "sehir_ID":"1", "ilce_ID": "6", "mahalle_adi":"Görbeyaz Mahallesi"},
    {"mahalle_ID": "8", "sehir_ID":"1", "ilce_ID": "6", "mahalle_adi":"Güneri Mahallesi"},
    {"mahalle_ID": "9", "sehir_ID":"1", "ilce_ID": "6", "mahalle_adi":"Hacıbeyli Mahallesi"},
    {"mahalle_ID": "10", "sehir_ID":"1", "ilce_ID": "6", "mahalle_adi":"Hacımirzalı Mahallesi"},
    {"mahalle_ID": "11", "sehir_ID":"1", "ilce_ID": "6", "mahalle_adi":"Hacıuşağı Mahallesi"},
    {"mahalle_ID": "12", "sehir_ID":"1", "ilce_ID": "6", "mahalle_adi":"Hamam Mahallesi"},
    {"mahalle_ID": "13", "sehir_ID":"2", "ilce_ID": "11", "mahalle_adi":"Kurugeçit Mahallesi"},
    {"mahalle_ID": "14", "sehir_ID":"2", "ilce_ID": "11", "mahalle_adi":"Yenikent Mahallesi"},
    {"mahalle_ID": "15", "sehir_ID":"2", "ilce_ID": "11", "mahalle_adi":"Asfalt Mahallesi"},
    {"mahalle_ID": "16", "sehir_ID":"2", "ilce_ID": "11", "mahalle_adi":"Yeni Mahallesi"},
    {"mahalle_ID": "17", "sehir_ID":"2", "ilce_ID": "11", "mahalle_adi":"Kalemkas Mahallesi"},
    {"mahalle_ID": "18", "sehir_ID":"1", "ilce_ID": "1", "mahalle_adi":"19 Mayıs Mahallesi"},
    {"mahalle_ID": "19", "sehir_ID":"1", "ilce_ID": "1", "mahalle_adi":"Çamlıbel Mahallesi"},
    {"mahalle_ID": "20", "sehir_ID":"1", "ilce_ID": "1", "mahalle_adi":"Dadaloğlu Mahallesi"},
    {"mahalle_ID": "21", "sehir_ID":"1", "ilce_ID": "1", "mahalle_adi":"Dervişler Mahallesi"},
    {"mahalle_ID": "22", "sehir_ID":"1", "ilce_ID": "3", "mahalle_adi":"Kelemeti Mahallesi"},
    {"mahalle_ID": "23", "sehir_ID":"1", "ilce_ID": "3", "mahalle_adi":"Kösreli Mahallesi"},
    {"mahalle_ID": "24", "sehir_ID":"2", "ilce_ID": "8", "mahalle_adi":"Tetirli Mahallesi"},
    {"mahalle_ID": "25", "sehir_ID":"2", "ilce_ID": "8", "mahalle_adi":"Yukarı Sarhan Mahallesi"}
]

Yeterince veri oluştuğuna göre bunlara göre HTML betiklerimizi hazırlayalım.
HTML Betikleri
    <div class="kapsul">
        <div class="satir">
            <p>Şehir:</p> <select id="select-sehirler"></select>
        </div>
        <div class="satir">
            <p>İlçe:</p> <select id="select-ilceler"></select>
        </div>
        <div class="satir">
            <p>Mahalle:</p> <select id="select-mahalleler"></select>
        </div>
    </div>

Oluşturduğumuz bu HTML betiklerinin nasıl göründüğüne bakalım.
HTML Çıktısı
JavaScript İl, İlçe, Mahalle ve JSON Örneği

Oluşan çıktı sonucunda select elementlerinin değerinin değişiminde (change) uygulanacak JavaScript betiklerini hazırlayalım.
JavaScript Betikleri
let objSehirler = document.querySelector("#select-sehirler");
fnSehirler();
objSehirler.addEventListener("change", function(event)
{
    var strSehir_ID = objSehirler.value;
    fnIlceler(strSehir_ID);
    fnMahalleler();
});
function fnSehirler()
{
    let adres = "sehirler.json";
    fetch(adres).then(cikti => cikti.json()).then((sonuc) => {
        var option = document.createElement("option");
        option.text = "Seçiniz";
        option.value = "";
        option.disabled = true;
        option.selected = true;
        objSehirler.add(option);
        for(i = 0; i < sonuc.length; i++) {
            option = document.createElement("option");
            option.text = sonuc[i].sehir_adi;
            option.value = sonuc[i].sehir_ID;
            objSehirler.add(option);
        }
    }).catch(hata => 
    { 
        alert("Şehirlere ait JSON dosyası yüklenirken bir hata oluştu! " + hata);
    });
}

let objIlceler = document.querySelector("#select-ilceler");
objIlceler.addEventListener("change", function(event)
{
    var strIlce_ID = objIlceler.value;
    fnMahalleler(strIlce_ID);
});

function fnIlceler(strSehir_ID)
{
    while (objIlceler.options.length > 0) {                
        objIlceler.remove(0);
    } 
    let adres = "ilceler.json";
    fetch(adres).then(cikti => cikti.json()).then((sonuc) => {
        var option = document.createElement("option");
        option.text = "Seçiniz";
        option.value = "";
        option.disabled = true;
        option.selected = true;
        objIlceler.add(option);
        for(i = 0; i < sonuc.length; i++) {
            if (sonuc[i].sehir_ID === strSehir_ID)
            {
                option = document.createElement("option");
                option.text = sonuc[i].ilce_adi;
                option.value = sonuc[i].ilce_ID;
                objIlceler.add(option);
            }
        }
    }).catch(hata => 
    { 
        alert("İlçelere ait JSON dosyası yüklenirken bir hata oluştu! " + hata);
    });
}

let objMahalleler = document.querySelector("#select-mahalleler");
function fnMahalleler(strIlce_ID)
{
    while (objMahalleler.options.length > 0) {                
        objMahalleler.remove(0);
    } 
    let adres = "mahalleler.json";
    fetch(adres).then(cikti => cikti.json()).then((sonuc) => {
        var option = document.createElement("option");
        option.text = "Seçiniz";
        option.value = "";
        option.disabled = true;
        option.selected = true;
        objMahalleler.add(option);
        for(i = 0; i < sonuc.length; i++) {
            if (sonuc[i].ilce_ID === strIlce_ID)
            {
                option = document.createElement("option");
                option.text = sonuc[i].mahalle_adi;
                option.value = sonuc[i].mahalle_ID;
                objMahalleler.add(option);
            }
        }
    }).catch(hata => 
    { 
        alert("Mahallelere ait JSON dosyası yüklenirken bir hata oluştu! " + hata);
    });
}

Çalışmanız esnasında JSON dosyaları çağırılırken Access to XMLHttpRequest at from origin 'null' has been blocked by CORS policy hatası karşınıza çıkabilir. O nedenle çalışmayı bir sunucuda denemeniz daha sağlıklı sonuçlar elde etmenizi sağlar.
Yine de kendi bilgisayarınızda test etmek istiyorsanız bilgisayarınıza Visual Studio Code yükleyin. Ardından eklentiler kısmından Live Server eklentisini kurunuz. Daha sonra çalışma dosyalarınızı Visual Studio Code uygulamasıyla "Open Folder" diyerek bir proje olarak açın. Sonrasında ise html dosyamıza sağ tıklayıp "Open with Live Server" diyerek onu lokal olarak çalıştırabilirsiniz.
Visual Studio Code
JavaScript İl, İlçe, Mahalle ve JSON Örneği
Visual Studio Code Live Server
JavaScript İl, İlçe, Mahalle ve JSON Örneği
Örnek

Şehir:

İlçe:

Mahalle:

Yorumlar

  • Ercihan Duymuş

    Ercihan Duymuş:

    1 yıl önce

    Ben buna submit eklemek istiyorum ama seçtiğim mahalleye göre submit etmesini istiyorum onu nasıl yaparım. İl seçtik, ilçe seçtik, mahalle seçtik en son seçtiğim mahalleye göre farklı bir sayfaya gitmesini nasıl yaparız.
    3 cevapla
  • Ahmet YÜCESOY

    Ahmet YÜCESOY:

    1 yıl önce

    Merhaba şehirler yüklenirken hata veriyor.
    2 cevapla
  • Yönetici Yorumu:

    1 yıl önce

    Aldığınız hatayı bizimle paylaşır mısınız?
  • Murat Ateş

    Murat Ateş:

    2 yıl önce

    Belki çok basit bir soru olucak ama kod bilmediğim için benim işime yarayacak bir şey ögrenmek isterim. İl seçtik, ilçe seçtik, mahalle seçtikten sonra her mahalleye atayacağımız farklı mesaji ekrana nasıl yazdirabiliriz? Örnegin posta kodu gibi olsun 15 tane posta kodumuz olsun 4 ilçeyle toplam 50 tane mahellemiz olsun bu 50 mahalleden istediklerimizi istediğimiz posta koduna atayalım. Mahalle seçince yanda otomatik posta kodu belirsin.
    3 cevapla
  • Yönetici Yorumu:

    2 yıl önce

    İlginize teşekkürler. Benzer şekilde mahallelerin olduğu json dosyasında posta_kodu diye bir sütun ekleyebilirsiniz. Böylece posta kodunu da json dosyasından okuyup istediğiniz yere yazdırabilirsiniz.

Yorum Yaz

Avatar

REKLAM

DDos Koruma, Botnet Koruma, Layer 7 Saldırı koruması, Sanal sunucu, Vds sunucu

REKLAM

Çizgi Filmler

INSTAGRAM VIDEO İNDİR

Instagram Video İndirme Aracı

EN

  • Popüler
  • Yeni
  • Son Yorum