Teknoloji Haberleri
Aşağı Git
Tüm Forumlar
Web Tasarım - Programlama
Yazılım Geliştirme
Projeler
JavaScript ile İl, İlçe, Mahalle Örneği ve JSON Kullanımı
Bu konudaki kullanıcılar: 1 misafir
1
Cevap 1716
Tıklama 0
Öne Çıkarma
Cevap 1716
Tıklama 0
Öne Çıkarma
1. sayfa
-
JavaScript ile İl, İlçe, Mahalle Örneği ve JSON Kullanımı
1. sayfa
DH Mobil uygulaması ile devam edin.
Mobil tarayıcınız ile mümkün olanların yanı sıra, birçok yeni ve faydalı özelliğe erişin.
Gizle ve güncelleme çıkana kadar tekrar gösterme.
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
Bu şehirlere karşılık uygun ilçeler oluşturalım.
ilceler.json
İlçeler de oluştuğuna göre bu ilçelere ait biraz mahalle ekleyelim.
mahalleler.json
Yeterince veri oluştuğuna göre bunlara göre HTML betiklerimizi hazırlayalım.
HTML Betikleri
Oluşturduğumuz bu HTML betiklerinin nasıl göründüğüne bakalım.
< Resime gitmek için tıklayın >
Oluşan çıktı sonucunda select elementlerinin değerinin değişiminde (change) uygulanacak JavaScript (jQuery) betiklerini hazırlayalım.
JavaScript (jQuery) Betikleri
let objSehirler = $('#select-sehirler');
objSehirler.empty();
objSehirler.append('<option selected="true" disabled>Seçiniz</option>');
objSehirler.prop('selectedIndex', 0);
const sehirlerjsonurl = '/sehirler.json';
$.getJSON(sehirlerjsonurl, function (data) {
$.each(data, function (a, b) {
objSehirler.append($('<option></option>').attr('value', b.sehir_ID).text(b.sehir_adi));
});
});
let objIlceler = $('#select-ilceler');
objIlceler.empty();
objIlceler.append('<option selected="true" disabled>Seçiniz</option>');
objIlceler.prop('selectedIndex', 0);
$(document).ready(function(){
$("#select-sehirler").on("change", function(){
let strSehir_ID = $(this).val();
fnIlceler_Doldur(strSehir_ID);
fnMahalleler_Doldur(null);
});
});
fnIlceler_Doldur = (parSehir_ID) => {
objIlceler.empty();
objIlceler.append('<option selected="true" disabled>Seçiniz</option>');
const ilcelerjsonurl = '/ilceler.json';
$.getJSON(ilcelerjsonurl, function (data) {
$.each(data, function (a, b) {
let strSehir_ID = b.sehir_ID;
if (parSehir_ID === strSehir_ID)
objIlceler.append($('<option></option>').attr('value', b.ilce_ID).text(b.ilce_adi));
});
});
}
let objMahalleler = $('#select-mahalleler');
objMahalleler.empty();
objMahalleler.append('<option selected="true" disabled>Seçiniz</option>');
objMahalleler.prop('selectedIndex', 0);
$(document).ready(function(){
$("#select-ilceler").on("change", function(){
let strIlce_ID = $(this).val();
fnMahalleler_Doldur(strIlce_ID);
});
});
fnMahalleler_Doldur = (parIlce_ID) => {
objMahalleler.empty();
objMahalleler.append('<option selected="true" disabled>Seçiniz</option>');
const mahallelerjsonurl = '/mahalleler.json';
$.getJSON(mahallelerjsonurl, function (data) {
$.each(data, function (a, b) {
let strIlce_ID = b.ilce_ID;
if (parIlce_ID === strIlce_ID)
objMahalleler.append($('<option></option>').attr('value', b.mahalle_ID).text(b.mahalle_adi));
});
});
}
Ç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.
< Resime gitmek için tıklayın >
< Resime gitmek için tıklayın >
Bol uygulamalı günler.
Kaynak: https://www.ontedi.com/javascript/javascript-ile-il-ilce-mahalle-ornegi-ve-json-kullanimi
< Bu mesaj bu kişi tarafından değiştirildi ontedi -- 8 Ocak 2020; 23:45:48 >