Populating a second select box depending of the first select box option

Question

I'm having this select, let's call it "X", that is populated with car brands as options from the database via a SELECT.

<select name="X">
<?php
$row = mysqli_query("SELECT * FROM brands");
while($row2 = mysqli_fetch_array($row))
echo '<option value="' . $row2['brandID'] . '">' . $row2['brandName'] . '</option>
?>
</select>

Now i have to populate the second select, called "Y", with the models specifics to a brand selected.

For example, if the option that's selected in the first select box (X) is Audi i should have as options in the second select (Y) the following: A4,A6,TT,TTs

To populate the second select box manually is easy, basicaly the same thing as for the first just with a different SQL request.

$row = mysqli_query("SELECT modelName from modele WHERE brandName = '$brand'");

Where $brand would have a value according to the first select's selection.

Thanks

Answer 1

Put an id in your <select name="X"> code like <select name="X" id ="X">

Put another select like <select name="Y" id="Y">. Which will be blank.

put this jquery in your page.

$("X").on("change",function(){
    var x_value=$("X").val();
    $.ajax({
        url:'ajax.php',
        data:{brand:x_value},
        type: 'post',
        success : function(resp){
            $("#Y").html(resp);               
        },
        error : function(resp){}
    });
});

in your ajax.php add the query.

<?php
$row = mysqli_query("SELECT modelName from modele WHERE brandName =".$_POST['brand']);
while($row2 = mysqli_fetch_array($row))
    echo '<option value="' . $row2['modelId'] . '">' . $row2['modelName'] . '</option>
?>

Hopefully it will work. Please tell me if you need anything.

Answer 2

Use ajax and on change event together,

method: 1- build a page where you post your queries to. 2- that page should react to the query and sends a respond with the desired list of options. example :

if ($_POST["vehicle"] == car) // send response with array of car names as json obj for example
else // send response with array of motorbikes names

your ajax should receive it and populate the filed on-complete.

If you need more details, I'll be happy to provide it