Jquery Json İl, İlçe, Semt, Cadde Seçimi

Kullanıcıdan adres isteyeceğimiz durumlarda çoğu zaman php mysql ile veritabanı bağlantılı ve her selectbox içeriği değişiminde diğer selectboxları tetikleyerek verileri alacak şekilde kurguluyoruz. Çok daha pratik bir yöntem mevucut. Veriler.json dosyasını her veriye parent_id değeri vererek çok daha basit bir şekilde yapabiliriz.

Demo İncele

 

<!DOCTYPE html>
<html>
<head>
<title>İl - İlçe - Semt - Cadde Uygulaması</title>
  <meta charset="UTF-8">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:600px;">
<div class="alert alert-success" role="alert">
  <h4 class="alert-heading">Bilgilendirme!</h4>
  <p>Demo uygulama için <b>İstanbul Anadolu > Kadıköy > Fenerbahçe</b> seçimi yapınız.</p>
 
</div>
    <label>Şehir Seçiniz</label>
<select name="Şehir" id="Şehir" class="form-control input-lg">
<option value="">Şehir seçiniz ...</option>
</select>
<br />
<label>İlçe Seçiniz</label>
<select name="İlçe" id="İlçe" class="form-control input-lg">
<option value="">İlçe seçiniz ...</option>
</select>
<br />
<label>Semt Seçiniz</label>
<select name="Semt" id="Semt" class="form-control input-lg">
<option value="">Semt seçiniz ...</option>
</select>
<br />
<label>Cadde Seçiniz</label>
<select name="Cadde" id="Cadde" class="form-control input-lg">
<option value="">Cadde seçiniz ...</option>
</select>
</div>
</body>
</html>

<script>
$(document).ready(function(){

load_json_data('Şehir');

function load_json_data(id, parent_id)
{
var html_code = '';
$.getJSON('veriler.json', function(data){

html_code += '<option value=""> '+id+' seçiniz ...</option>';
$.each(data, function(key, value){
if(id == 'Şehir')
{
if(value.parent_id == '0')
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
else
{
if(value.parent_id == parent_id)
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
});
$('#'+id).html(html_code);
});

}

$(document).on('change', '#Şehir', function(){
var il_id = $(this).val();
if(il_id != '')
{
load_json_data('İlçe', il_id);
}
else
{
$('#İlçe').html('<option value="">İlçe seçiniz ...</option>');
$('#Semt').html('<option value="">Semt seçiniz ...</option>');
}
});
$(document).on('change', '#İlçe', function(){
var ilce_id = $(this).val();
if(ilce_id != '')
{
load_json_data('Semt', ilce_id);
}
else
{
$('#Semt').html('<option value="">Semt seçiniz ...</option>');
}
});

$(document).on('change', '#Semt', function(){
var semt_id = $(this).val();
if(semt_id != '')
{
load_json_data('Cadde', semt_id);
}
else
{
$('#Cadde').html('<option value="">Cadde seçiniz ...</option>');
}
});
});
</script>



[
{
"id":"1",
"name":"İstanbul (Anadolu)",
"parent_id":"0"
},
{
"id":"2",
"name":"İstanbul (Avrupa)",
"parent_id":"0"
},
{
"id":"3",
"name":"Kocaeli",
"parent_id":"0"
},
{
"id":"4",
"name":"Adalar",
"parent_id":"1"
},
{
"id":"5",
"name":"Ataşehir",
"parent_id":"1"
},
{
"id":"6",
"name":"Beykoz",
"parent_id":"1"
},
{
"id":"7",
"name":"Çekmeköy",
"parent_id":"1"
},
{
"id":"8",
"name":"Kadıköy",
"parent_id":"1"
},
{
"id":"9",
"name":"Kartal",
"parent_id":"1"
},
{
"id":"10",
"name":"Maltepe",
"parent_id":"1"
},
{
"id":"11",
"name":"Pendik",
"parent_id":"1"
},
{
"id":"12",
"name":"Sancaktepe",
"parent_id":"1"
},
{
"id":"13",
"name":"Sultanbeyli",
"parent_id":"1"
},
{
"id":"14",
"name":"Şile",
"parent_id":"1"
},
{
"id":"15",
"name":"Tuzla",
"parent_id":"1"
},
{
"id":"16",
"name":"Ümraniye",
"parent_id":"1"
},
{
"id":"17",
"name":"Üsküdar",
"parent_id":"1"
},
{
"id":"18",
"name":"Arnavutköy",
"parent_id":"2"
},
{
"id":"19",
"name":"Avcılar",
"parent_id":"2"
},
{
"id":"20",
"name":"Bağcılar",
"parent_id":"2"
},
{
"id":"21",
"name":"Bakırköy",
"parent_id":"2"
},
{
"id":"22",
"name":"Başakşehir",
"parent_id":"2"
},
{
"id":"23",
"name":"Bayrampaşa",
"parent_id":"2"
},
{
"id":"24",
"name":"Beşiktaş",
"parent_id":"2"
},
{
"id":"25",
"name":"Beylikdüzü",
"parent_id":"2"
},
{
"id":"26",
"name":"Beyoğlu",
"parent_id":"2"
},
{
"id":"27",
"name":"Büyükçekmece",
"parent_id":"2"
},
{
"id":"28",
"name":"Çatalca",
"parent_id":"2"
},
{
"id":"29",
"name":"Esenler",
"parent_id":"2"
},
{
"id":"30",
"name":"Esenyurt",
"parent_id":"2"
},
{
"id":"31",
"name":"Eyüpsultan",
"parent_id":"2"
},
{
"id":"32",
"name":"Fatih",
"parent_id":"2"
},
{
"id":"33",
"name":"Güngören",
"parent_id":"2"
},
{
"id":"34",
"name":"Kağıthane",
"parent_id":"2"
},
{
"id":"35",
"name":"Küçükçekmece",
"parent_id":"2"
},
{
"id":"36",
"name":"Sarıyer",
"parent_id":"2"
},
{
"id":"37",
"name":"Silivri",
"parent_id":"2"
},
{
"id":"38",
"name":"Sultangazi",
"parent_id":"2"
},
{
"id":"39",
"name":"Şişli",
"parent_id":"2"
},
{
"id":"40",
"name":"Zeytinburnu",
"parent_id":"2"
},
{
"id":"41",
"name":"Burgazada",
"parent_id":"4"
},
{
"id":"42",
"name":"Büyükada",
"parent_id":"4"
},
{
"id":"43",
"name":"Heybeliada",
"parent_id":"4"
},
{
"id":"44",
"name":"Kınalıada",
"parent_id":"4"
},
{
"id":"45",
"name":"Merkez",
"parent_id":"4"
},
{
"id":"46",
"name":"Ataşehir",
"parent_id":"5"
},
{
"id":"47",
"name":"Barbaros",
"parent_id":"5"
},
{
"id":"48",
"name":"Ferhatpaşa",
"parent_id":"5"
},
{
"id":"49",
"name":"İçerenköy",
"parent_id":"5"
},
{
"id":"50",
"name":"Kayışdağı",
"parent_id":"5"
},
{
"id":"51",
"name":"Küçükbakkalköy",
"parent_id":"5"
},
{
"id":"52",
"name":"Mustafa Kemal",
"parent_id":"5"
},
{
"id":"53",
"name":"Namık Kemal",
"parent_id":"5"
},
{
"id":"54",
"name":"Örnek",
"parent_id":"5"
},
{
"id":"55",
"name":"Yeni Çamlıca",
"parent_id":"5"
},
{
"id":"56",
"name":"Yeni Sahra",
"parent_id":"5"
},
{
"id":"57",
"name":"Anadoluhisarı",
"parent_id":"6"
},
{
"id":"58",
"name":"Beykoz",
"parent_id":"6"
},
{
"id":"59",
"name":"Çavuşbaşı",
"parent_id":"6"
},
{
"id":"60",
"name":"Çubuklu",
"parent_id":"6"
},
{
"id":"61",
"name":"Göksu",
"parent_id":"6"
},
{
"id":"62",
"name":"Köyler",
"parent_id":"6"
},
{
"id":"63",
"name":"Paşabahçe",
"parent_id":"6"
},
{
"id":"64",
"name":"Tokatköy",
"parent_id":"6"
},
{
"id":"65",
"name":"Alamdağ",
"parent_id":"7"
},
{
"id":"66",
"name":"Çekmeköy",
"parent_id":"7"
},
{
"id":"67",
"name":"Köyler",
"parent_id":"7"
},
{
"id":"68",
"name":"Ömerli",
"parent_id":"7"
},
{
"id":"69",
"name":"Taşdelen",
"parent_id":"7"
},
{
"id":"70",
"name":"19 Mayıs",
"parent_id":"8"
},
{
"id":"71",
"name":"Acıbadem",
"parent_id":"8"
},
{
"id":"72",
"name":"Altıyol",
"parent_id":"8"
},
{
"id":"73",
"name":"Bahariye",
"parent_id":"8"
},
{
"id":"74",
"name":"Bostancı",
"parent_id":"8"
},
{
"id":"75",
"name":"Caddebostan",
"parent_id":"8"
},
{
"id":"76",
"name":"Caferağa",
"parent_id":"8"
},
{
"id":"77",
"name":"Çiftehavuzlar",
"parent_id":"8"
},
{
"id":"78",
"name":"Eğitim",
"parent_id":"8"
},
{
"id":"79",
"name":"Erenköy",
"parent_id":"8"
},
{
"id":"81",
"name":"Fenerbahçe",
"parent_id":"8"
},
{
"id":"82",
"name":"Kaşıkadası",
"parent_id":"41"
},
{
"id":"83",
"name":"Münir Nurettin Selçuk Caddesi",
"parent_id":"81"
},
{
"id":"84",
"name":"Fener Kalamış Caddesi",
"parent_id":"81"
}
]

 

 

Eklentiler

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir