How can i output specific rows using a select form?

Question

I have a select option form and i would like to get the selected data from my database.

The table looks like this:

id | brand | types | size
1 | nike | tshirt | L
2 | nike | shorts | XL
3 | puma | cap | foo
4 | jordans | shoes | foo

This is what i've tried:

<?php
    include_once '../dbc.php';

    $brand = mysqli_real_escape_string($conn, $_POST['brand']);
    $type = mysqli_real_escape_string($conn, $_POST['type']);
    $size = mysqli_real_escape_string($conn, $_POST['size']);
    $price = mysqli_real_escape_string($conn, $_POST['price']);

    $sql = "SELECT * FROM cars WHERE brand='$brand'";
    $result = mysqli_query($conn, $sql);
    $resultCheck = mysqli_num_rows($result);

    if($resultCheck > 0){
        while($row = $result->fetch_assoc()) {
            echo '<option value="'.$row['type'].'">'.$row['type'].'</option>';
        }
    }
?>

The result should look like this, when selecting nike it should add the options tshirt and shorts from the database into the <select name="type">

<form id="clothesList">
<select name="brand">
    <option value="nike">nike</option>
    <option value="puma">puma</option>
    <option value="jordan">jordans</option>
</select>
<select name="type">
    <!-- Show here all avilable options from database -->
    <option value="tshirt">tshirt</option>
    <option value="shorts">shorts</option>
</select>
<select name="size">
    <!-- After selecting brand, type it should show the sizes -->
    <option value="L">L</option>
    <option value="M">M</option>
</select>
</form>

I also figured out how to get the values when changed:

$(document).ready( function() {

    $('#clothesList select').change(function(){
        console.log($(this).val());
    });

});

Answer 1

Use ajax to make calls, let's say you pick nike, use ajax to grab options under nike, and append each option to select. and when you pick tshirts, do the same thing, until there are no more options left.