jQuery Veritabanı Kullanmadan İl İlçe Seçimi

Merhaba arkadaşlar bu ders üzerinde sizlere web üzerinde en fazla kullanılan javascript kütüphanesi olan jQuery ile birlikte nasıl herhangi bir veritabanı sistemi kullanmadan dinamik olarak il ilçe seçimi yaptırabileceğinizi anlatacağım.

Ekstra olarak bu yazıda size hazır bir kod verip bunu kopyalayıp yapıştırın olacak şeklinde bir paylaşım olmayacak, küçük bir örnek ile yapım mantığını göstereceğim. İl-ilçe datasını buna göre uyarlamak ve sisteminizi hazırlamayı size bırakacağım.

Öncelikle html kodumuzda jQuery kütüphanesini dahil ediyoruz (şuanki sürümü 3.3.1) ve 2 adet select oluşturuyoruz.

HTML kodlarımızda 3 şehir oluşturdum ve bunların slug niteliklerine şehirlerin türkçe karaktersiz küçük harflerle isimlerini ekledim. Aynı şekilde ilçelere de il-slug niteliği ekledim ve bu alanlara da içinde bulundukları ilin slugunu ekledim.

jQuery kısmında ise sıra ile şu adımları izledik:

  1. Sayfa yüklendiğinde ilçe selectindeki tüm ilçeleri gizledik.
  2. İl select’inin değeri değiştirildiğinde çalıştırılacak fonksiyonu oluşturduk.
  3. İl değiştrildiğinde ilçeler silinmesi için tekrar aynı şekilde tüm ilçeleri gizledik.
  4. Slug değişkenimize seçilen ilin sahip olduğu slug niteliğini eşitledik
  5. Şehir seçiniz option’ını seçildiğinde hataya düşmemesi için slug değerimizin boş olup olmadığını kontrol ettik.
  6. İlçeler içinden il-slug değeri slug değişkenimizi içeren ilçeleri görünür yaptık.

Yazı başında da belirttiğim gibi bu yazı mantığını kavramanız ve basitçe nasıl yapıldığını görmeniz içindi, bu yüzden herhangi bir hazır içerik bulunmuyor fakat şöyle bir güzellik yaptım Türkiye içindeki il ve ilçe veritabanını mySQL uyumlu şekilde yükledim. Bu dosyayı kullanarak tüm slug değerlerine erişebilir ve bir döngü ile optionlarınızı çıktı alıp direkt olarak html koduunza ekleyebilirsiniz.

MySQL il-ilçe veritabanını indirmek için buraya tıklayabilirsiniz.

Bir Cevap Yazın