Wyświetlanie opcji listy rozwijanej zależne od poprzednich

Cześć,
potrzebuję pomocy. Chciałbym zrobić dwie listy rozwijane lecz druga miałaby być zależna od pierwszej.

Przykład roboczy:
W pierwszej liście mam do wyboru pomieszczenie do sprzątania (pokój, kuchnia).
W drugiej czynność (wycieranie kurzy, mycie naczyń).

W momencie, gdy wybiorę sprzątanie kuchni to miałoby się tylko pokazać mycie naczyń.

Na chwilę obecną próbowałem zrobić coś takiego:

$result=sqlsrv_query($conn, "SELECT distinct Obszar FROM cleaningHouse", array(), array( "Scrollable" => 'keyset' ));
$result1=sqlsrv_query($conn, "SELECT distinct Czynnosc FROM cleaningHouse where Obszar = '$result'", array(), array( "Scrollable" => 'keyset' ));

<label>Obszar</label>
<select name="one" class="custom-select" style="width:300px;" id="idispl" required="true">
<option selected disabled value="">Wybierz obszar</option>
	<?php 
		while($rows = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)){
	?>
	<option value="<?php  echo $rows['Obszar'];?>">
		<?php echo $rows['Obszar'];?>
	</option>
		<?php } ?>
</select>

<label>Czynności</label><br>
<select name="two" class="custom-select" style="width:300px;" id="idispl" required="true">
<option selected disabled value="">Wybierz czynność</option>
	<?php 
		while($rows = sqlsrv_fetch_array($result1, SQLSRV_FETCH_ASSOC)){
	?>
	<option value="<?php echo $rows['Czynnosc'];?>"> 
		<?php echo $rows['Czynnosc'];?>
	</option>
		<?php } ?>
</select>

Żeby mieć różne wartości w selektach, osobiście użyłbym ajaxa. Obecnie i tak musisz zmieniać zawartość drugiego Selecta (np poprzez przeladowanie strony).

Najważniejsze jest to żebyś zrozumiał, że to co chcesz zrobić jest w miarę dynamiczne, bo coś zależy od czegoś, więc zachodzi potrzeba podmiany wartości w drugim selekcie. Możesz też przygotować listę wszystkich ścieżek i wartości i podmieniać je w js'ie, nawet bez ajaxa.

@MiniBus02: Masz trzy sposoby:

1. Brzydki sposób - Przy każdym onchange select robisz refresh - nie polecam
2. Niezbyt praktyczny sposób - ładujesz wszystkie możliwe kombinacje do JS'a i bez przeładowań ajaxem wyświetlasz to co chcesz
3. Najbardziej stosowany sposób - jak podał @axelbest

@MiniBus02: A tak spytam, czy jest jakiś konkretny powód na razie że to musi być brane z bazy? Może bazę (czyli persystencję) możnaby dodać później.

Nie polecam robić AJAX'ów co każdą zmianę selectów jak przedmówcy, bo to będzie trwało długo. Nie spodziewam się że tych obszarów i czynności będzie dużo; więc ja bym je wczytał na raz do frontu; i potem JS'em sobie zmieniał kontrolki.

Ja bym to napisał bardziej tak

<?php
function areas() {
    $result = sqlsrv_query($conn, "SELECT distinct Obszar FROM cleaningHouse", []);
    while ($row = sqlsrv_fetch_array($result, SQLSRV_FETCH_ASSOC)) {
        yield $row['Obszar'];
    }
}
?>

<p><label for="one">Obszar</label></p>
<select name="one" class="custom-select" style="width:300px;" id="idispl" required="true">
    <option selected disabled value="">
        Wybierz obszar
    </option>
    <?php foreach ($this->areas() as $area): ?>
        <option value="<?= htmlEntities($area) ?>">
            <?= htmlEntities($area) ?>
        </option>
    <?php endforeach; ?>
</select>

<p><label for="two">Czynności</label></p>
<select name="two" class="custom-select" style="width:300px;" id="idispl" required="true">
    <option selected disabled value="">
        Wybierz czynność
    </option>
</select>

<script>
    document.getElementById("idispl").addEventListener("change", event => {
       // tutaj musiałybś wyczaić że <select> został zmieniony i podmienić drugi 
    });
</script>

Zrobiłem to ajaxem tak jak mówiliście i zadziałało, skorzystałem z jednego z tutków na yt :)
Dziękuję!