SelectBox'ta Bilgileri Çekip Sayfayı Yenileme

Merhaba. Öncelikle hazır kod beklemek yerine araştıracak bir yol beklemeniz beni memnun etti.
Eğer sitenizi JQuery ile kullanıyorsanız ajax size yardımcı olacaktır. ajax sayesinde sayfayı yenilemeden sunucunuza istek atıp yanıt alabilirsiniz. JQuery kullanmıyorsanız da XMLHttpRequest ile saf javascript kullanarak aynı işi yapabilirsiniz ama o zaman işler biraz daha çetrefilli hale geliyor.
Örnek olarak bir kurgu yapalım:
index.html

<html>
    <head>
        <title>Deneme</title>
        <style>
            * { margin:0; padding:0; box-sizing:border-box; }
            html, body { height:100%; }
            body { display:flex; flex-direction:row; }
            .secim-alani { flex:1; height:100%; display:flex; align-items:center; justify-content:center; }
            .secim-alani > #benimSelectim { width:200px; height:50px; border:1px solid #ccc; border-radius:3px; }
            .ilceler-alani { flex:1; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
            .ilceler-alani > h1 { padding:30px; width:100%; text-align:center; border-bottom:1px dashed #ccc; }
            .ilceler-alani > .ilceler { flex:1; overflow-y:scroll; text-align:center; padding:30px; }
            .ilceler-alani > .ilceler > div { padding:20px 0; }
        </style>
    </head>
    <body>
        <label class="secim-alani">
            <select id="benimSelectim">
                <option selected disabled>İl Seçin...</option>
                <option value="Kayseri">Kayseri</option>
                <option value="Samsun">Samsun</option>
            </select>
        </label>
        <div class="ilceler-alani">
            <h1>İlçeler</h1>
            <div class="ilceler">
                Lütfen önce il seçin.
            </div>
        </div>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="index.js"></script>
    </body>
</html>

Basit bir tasarım verilmiş halde, sol tarafta il seçimi için oluşturulmuş bir select kutumuz, sağ tarafta da seçilecek ilin ilçelerini listeleyecek alanımız var.
Sayfamıza CDN yoluyla jquery'i çağırdık. Son olarak da index.js dosyamızı çağırdık.
Amacımız select kutusunda bir değişiklik olduğunda bunu yakalayıp ilcegetir.php dosyasına bağlanmak ve o şehirdeki ilçelerin listesini alıp ilçeler alanında göstermek.
index.js

$("#benimSelectim").on("change", function() { // benimSelectim id'li elementte change olayı meydana gelince bu fonksiyon çalışsın
    var secilenSehir = $(this).val(); // Bu elementin değerini alıp secilenSehir değişkenine ata
    $.ajax({
        url: "ilcegetir.php", // ilcegetir.php'ye istek at
        data: { il: secilenSehir }, // // ilcegetir.php'ye istek atarken il adıyla secilenSehir değişkenini de gönder.
        method: "post", // POST yöntemiyle istek at.
        success: function(response) { // ilcegetir.php'ye istek atılıp başarıyla sonuç dönmüşse bu fonksiyon çalışır.
            $(".ilceler").html(response); // ilcegetir.php'den dönen değeri olduğu gibi ilceler class'lı alana yazdırsın.
        },
        error: function(error) { // ilcegetir.php'ye istek atıldığında bir hata oluşmuşsa bu fonksiyon çalışır.
            alert("Bir hata oluştu");
            console.log(error);
        }
    });
});

Son olarak da ilcegetir.php dosyamızı ayarlayalım.
ilcegetir.php

<?php
if(!isset($_POST["il"])) { // Eğer "il" adıyla bir değişken POST edilmemişse
    echo "<div>Lütfen il seçin</div>";  // Ekrana bunu yaz
    exit(); // Ve bu satırdan itibaren yanıt oluşturmayı bırak.
}
$il = $_POST["il"]; // POST edilen il değerini $il değişkenine ata.
// Burada veritabanından çekme örneği vermiyorum daha fazla uzatmamak için. Doğrudan if-else'le sonuç döndüreceğim.
if($il=="Kayseri") { // Eğer il "Kayseri" ise ekrana şunları yaz:
    echo "<div>Hacılar</div>";
    echo "<div>Koca Hasan</div>";
    echo "<div>Melikgazi</div>";
    echo "<div>Talas</div>";
    exit(); // ve bu satırdan itibaren yanıt oluşturmayı bırak.
}
if($il=="Samsun") { // Eğer il Samsun ise ekrana şunları yaz:
    echo "<div>İlkadım</div>";
    echo "<div>Atakum</div>";
    echo "<div>Canik</div>";
    exit(); // ve bu satırdan itibaren yanıt oluşturmayı bırak.
}
// İl Samsun veya Kayseri değilse bir sorun var demektir... Ön taraftan sadece bu iki ili select kutusuna eklemiştik.
echo "<div>Şehir sadece Kayseri veya Samsun olabilir!</div>";

Umarım yardımcı olur. İyi çalışmalar.