<select id="il" onchange="ilDegisti()">
        <option value="">İl Seçiniz</option>
    </select>
    <select id="ilce" onchange="ilceDegisti()">
        <option value="">İlçe Seçiniz</option>
    </select>
    <select id="mahalle">
        <option value="">Mahalle Seçiniz</option>
    </select>

    <script>
    let tumVeriler = null;

    async function verileriYukle() {
        try {
            const response = await fetch('veriler.json');
            tumVeriler = await response.json();
            illerDoldur();
        } catch (error) {
            console.error('Veri yükleme hatası:', error);
        }
    }

    function illerDoldur() {
        const ilDropdown = document.getElementById("il");
        tumVeriler.sehirler.forEach(sehir => {
            const option = document.createElement("option");
            option.value = sehir.sehir_id;
            option.textContent = sehir.sehir_adi;
            ilDropdown.appendChild(option);
        });
    }

    function ilDegisti() {
        const ilId = document.getElementById("il").value;
        const ilceDropdown = document.getElementById("ilce");
        const mahalleDropdown = document.getElementById("mahalle");
        
        ilceDropdown.innerHTML = '<option value="">İlçe Seçiniz</option>';
        mahalleDropdown.innerHTML = '<option value="">Mahalle Seçiniz</option>';
        
        const ilgiliIlceler = tumVeriler.ilceler.filter(ilce => ilce.sehir_id === ilId);
        ilgiliIlceler.forEach(ilce => {
            const option = document.createElement("option");
            option.value = ilce.ilce_id;
            option.textContent = ilce.ilce_adi;
            ilceDropdown.appendChild(option);
        });
    }

    function ilceDegisti() {
        const ilceId = document.getElementById("ilce").value;
        const mahalleDropdown = document.getElementById("mahalle");
        
        mahalleDropdown.innerHTML = '<option value="">Mahalle Seçiniz</option>';
        
        const ilgiliMahalleler = tumVeriler.mahalleler.filter(mahalle => mahalle.ilce_id === ilceId);
        ilgiliMahalleler.forEach(mahalle => {
            const option = document.createElement("option");
            option.value = mahalle.mahalle_id;
            option.textContent = mahalle.mahalle_adi;
            mahalleDropdown.appendChild(option);
        });
    }

    window.onload = verileriYukle;
    </script>

{
  "sehirler": [
    {"sehir_id": "1", "sehir_adi": "ADANA"},
    {"sehir_id": "2", "sehir_adi": "ADIYAMAN"}
  ],
  "ilceler": [
    {"ilce_id": "1", "ilce_adi": "SEYHAN", "sehir_id": "1"},
    {"ilce_id": "2", "ilce_adi": "CEYHAN", "sehir_id": "1"}
  ],
  "mahalleler": [
    {"mahalle_id": "1", "mahalle_adi": "2000 EVLER MAHALLESİ", "ilce_id": "1"},
    {"mahalle_id": "2", "mahalle_adi": "AHMET REMZİ YÜREĞİR MAHALLESİ", "ilce_id": "1"}
  ]
}