Bunu bir de vanilla ile yazip ek olarak paylas hocam, mutlu oluruz :) 0x0480 takilin madem

genelde il ilçe datasını; ilceler. json şeklinde tutuyorum, il seçildikten sonra 'if ' sorgusuna gerek kalmıyor, direk dngüye alabiliyorsun. zellikle mahalle kısmına da giriceksen, türkiyedeki bütün mahallelerin il ilçe id'lerini kontrol etmene gerek kalmıyor.

genelde il ilçe datasını; ilceler. json şeklinde tutuyorum, il seçildikten sonra 'if ' sorgusuna gerek kalmıyor, direk dngüye alabiliyorsun. zellikle mahalle kısmına da giriceksen, türkiyedeki bütün mahallelerin il ilçe id'lerini kontrol etmene gerek kalmıyor. Ama tek seferde dndüreceğin verinin boyutu artmış oluyor? 0x0480 takilin madem

Bu makalemizde birbirine gre değişen select kutuları ve her değişim olayında uygun koşula gre kayıtların ilgili selecte doldurulması işlenecektir. Makalemizi "İl, İlçe ve Mahalle" seçimlerine gre 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 gre bu ilçelere ait json dosyası oluşturup biraz mahalle ekleyelim. mahalleler. json Yeterince veri oluştuğuna gre bunlara gre 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 gründüğüne bakalım. Oluşan çıktı sonucunda select elementlerinin değerinin değişiminde uygulanacak JavaScript betiklerini hazırlayalım. JavaScript Betikleri let objSehirler = $ ; objSehirler. empty ; objSehirler. append ; objSehirler. prop('selectedIndex', 0); const sehirlerjsonurl = '/sehirler. json'; $. getJSON(sehirlerjsonurl, function { $. each(data, function ); }); let objIlceler = $ ; objIlceler. empty ; objIlceler. append ; objIlceler. prop('selectedIndex', 0); $ . ready(function { $ . on("change", function ); }); fnIlceler_Doldur = => { objIlceler. empty ; objIlceler. append ; const ilcelerjsonurl = '/ilceler. json'; $. getJSON(ilcelerjsonurl, function { $. each(data, function ); }); } let objMahalleler = $ ; objMahalleler. empty ; objMahalleler. append ; objMahalleler. prop('selectedIndex', 0); $ . ready(function { $ . on("change", function ); }); fnMahalleler_Doldur = => { objMahalleler. empty ; objMahalleler. append ; const mahallelerjsonurl = '/mahalleler. json'; $. getJSON(mahallelerjsonurl, function { $. each(data, function ); }); } Ç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 Visual Studio Code Live Server rnek Ekran Çıktısı Bol uygulamalı günler. Kaynak: https://www.ontedi.com/javascript/javascript-ile-il-ilce-mahalle-ornegi-ve-json-kullanimi ontedi tarafından 10/Oca/20 12:33 tarihinde düzenlenmiştir Matematikçi ve Yazılımcı. http://www.ontedi.com ve http://www.cizgi.site Siteme beklerim herkesi.