<label for="faturasehir" class="required_field">
Şehir <span class="required" aria-hidden="true">*</span>
</label>

<span class="woocommerce-input-wrapper">
<select name="faturasehir" id="faturasehir" class="form-control">
<option value="">Şehir Seçiniz</option>
</select>
</span>
</p>



<label for="faturailce" class="required_field">
İlçe <span class="required" aria-hidden="true">*</span>
</label>

<span class="form-control">
<select name="faturailce" id="faturailce" class="form-control">
<option value="">İlçe Seçiniz</option>
</select>
</span>
</p>


<script>
document.addEventListener("DOMContentLoaded", function () {

const sehirSelect = document.getElementById("faturasehir");
const ilceSelect = document.getElementById("faturailce");

fetch("tr81.json")
.then(res => res.json())
.then(data => {


data.forEach(sehir => {
const option = document.createElement("option");
option.value = sehir.il_adi;
option.textContent = sehir.il_adi;
sehirSelect.appendChild(option);
});


sehirSelect.addEventListener("change", function () {
const secilenSehir = this.value;
ilceSelect.innerHTML = '<option value="">İlçe Seçiniz</option>';

const bulunanSehir = data.find(item => item.il_adi === secilenSehir);
if (bulunanSehir) {
bulunanSehir.ilceler.forEach(ilce => {
const option = document.createElement("option");
option.value = ilce;
option.textContent = ilce;
ilceSelect.appendChild(option);
});
}


if (window.jQuery && jQuery.fn.select2) {
jQuery(ilceSelect).trigger("change.select2");
}
});


if (window.jQuery && jQuery.fn.select2) {
jQuery(sehirSelect).select2({
placeholder: "Şehir Seçiniz",
width: "100%"
});

jQuery(ilceSelect).select2({
placeholder: "İlçe Seçiniz",
width: "100%"
});
}

})
.catch(err => {
console.error("İl/İlçe JSON yüklenemedi:", err);
});
});
</script>



GEREKLİ JSON




TÜM HTML SİSTEMLERİNİZE ENTEGRE EDEBİLİRSİNİZ FORUMDA VARDI FAKAT DAHA SADE HALİNİ ATAYIM DEDİM İYİ FORUMLAR