Türkiye İl - İlçe Dropdown Seçimi - 2 - AJAX ile Kullanımı

Türkiye'nin il ve ilçelerinin listelenmesini sağlayacak bir yapının kurulmasına değineceğim.Bu yapıyı ajax ile kuracağız.

Temel bir ajax metodunun parametrelerine değinecek olursak;

$.ajax({
  url: Json dosyasının yolu,
  data: Elde ettiğimiz data,
  success: İstek başarılı olduğunda yazılacak işlemler,
  dataType: Veri tipi (json vs.)
});

Ö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_ilceGetirUsingAjax.js"></script>

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

Sonrasında il_ilceGetirUsingAjax.js dosyasında bulunan metotları oluşturmamız gerekir. İlk metodumuzda iller.json dosyasında illeri listeledik. success parametresinde ç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. YerId'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ı. success parametresinde 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; YerId'si ilce olan select input alanına ise dönen sonucu append() metodu ile liste tamamlanır. attr() metodu ile text ve value değerleri tanımlandı.

$.ajax({
    url: 'Models/iller.json',
    dataType: 'json',
    type: 'GET',
    data: "",
    success: function (data) {
        for (row in data) {
            $('#il').append($('<option></option>').attr('value', data[row].YerID).text(data[row].YerAdi));
        }
    },
    error: function (jqXHR, textStatus, errorThrown) {
        alert(errorThrown);
    }
});



$("#il").change(function () {
    $("#ilce").attr("disabled", false).html("<option value=''>İlçe Seçiniz..</option>");
    $.ajax({
        url: 'Models/ilceler.json',
        dataType: 'json',
        type: 'GET',
        data: "",
        success: function (data) {
            for (row in data) {
                if (data[row].SehirID == $("#il").val()) {
                    $('#ilce').append($('<option></option>').attr('value', data[row].YerID).text(data[row].YerAdi));
                }
            }
        },
        error: function (jqXHR, textStatus, errorThrown) {
            alert(errorThrown);
        }
    });
})


Bir önceki yazımda getJSON metodundan yararlanarak benzer bir örnek yapmıştım. getJSON metodu ajax isteği yapmıştık. Ayrıca bu yazımda kullandığım yönteme göre daha az satırlı kod yazabiliriz. Parametre yönünden url ve istek yapılan metodun tipi olan type (GET,POST) aynıdır.

Projeyi github hesabımdan indirip kendi projelerinizde uygulayabilirsiniz.

Yorumlar

Yorum Gönder