Türkiye İl - İlçe Dropdown Seçimi - 1 - jQuery getJSON Metodu Kullanımı

jQuery'de getJSON metodunu kullanarak Türkiye'nin il ve ilçelerinin listelenmesini sağlayacak bir yapının kurulmasına değineceğim. getJSON metodu ajax isteği yapar.

getJSON metodunun parametrelerine değinecek olursak
  • url: GET isteğimizi gönderdiğimiz linktir. Bu link bir json dosyası olabileceği gibi bir api url veya MVC'den aşina olacağınız JSONResult dönüş tipinde bir url olabilir.
  • data: Sunucuya istek gönderdiğimiz objedir.
  • success: Bu metot eğer istek başarılı olursa yapılacak işlemleri belirtir. 
Öncelikle HTML' sayfamızı oluşturalım. İki adet dropdown olacaktır. Birinci dropdown'da iller doldurulacak, ikinci dropdown'da ise seçilen ile göre ilçeler dolacaktır.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="Scripts/jquery-3.3.1.min.js"></script>
    <script src="Scripts/bootstrap.min.js"></script>
    <link href="Content/bootstrap.min.css" rel="stylesheet" />

</head>
<body>
    <div class="container">
        <div class="row">
            <div class="col-md-12"><h1>Türkiye İl İlçe Seçimi</h1></div>
            <div class="col-md-3">
                <select name="il" id="il" class="form-control">
                    <option value="">İl Seçiniz...</option>
                </select>
            </div>

            <div class="col-md-3">
                <select name="ilce" id="ilce" class="form-control" disabled="disabled">
                    <option value="">İlçe Seçiniz...</option>
                </select>
            </div>
        </div>
    </div>
</body>
</html>
<script src="Scripts/Custom/Il_IlceGetJson.js"></script>

iller.json ve ilceler.json dosyaları github hesabımda mevcut olup kendi projelerinizde kullanabilirsiniz.

Sonrasında Il_IlceGetJson.js dosyasında bulunan metotları oluşturmamız gerekir. İlk metodumuzda iller.json dosyasında illeri listeledik. $.each metodu çekilen verilerde dönerek dropdown'un value ve text değerlerini oluşturur. YerId'si il olan select input alanına ise dönen sonucu append() metodu ile liste tamamlanır.

İkinci metodumuzda ise .on("change") metodundan yararlandık. Id'si il olan dropdown'un change özelliği ile ilin id'sini val() metodu ile elde ettik. Ayrıca Id'si ilce olan dropdown'unun disabled özelliği kaldırıldı. $.each metodu ile iller için yapılan işlemin benzeri yapıldı. Farkı ise eğer il'in YerId'si ile ilceler.json'daki il'in SehirID'si eşleşiyorsa ilçeyi döndüren kontrol yazıldı. İşlem sonucunda; Id'si ilce olan select input alanına ise dönen sonucu append() metodu ile liste tamamlanır.

$.getJSON("Models/iller.json", function (sonuc) {
    $.each(sonuc, function (index, value) {
        var row = "";
        row += '<option value="' + value.YerID + '">' + value.YerAdi + '</option>';
        $("#il").append(row);

    })
});



$("#il").on("change", function () {
    var il = $("#il").val();
    $("#ilce").attr("disabled", false).html("<option value=''>İlçe Seçiniz...</option>");
    $.getJSON("Models/ilceler.json", function (sonuc) {
        $.each(sonuc, function (index, value) {
            var row = "";
            if (value.SehirID == il) {
                row += '<option value="' + value.YerID + '">' + value.YerAdi + '</option>';
                $("#ilce").append(row);
            }
        });
    });
});


Projeyi github hesabımdan indirip kendi projelerinizde uygulayabilirsiniz.

Yorumlar

Yorum Gönder