php – Is there a way to consolidate Ajax dropdowns that filters data from MYSQLi database

I recently started a project which has a database of rail cars for a train simulator. Im trying to set up a way to filter the data based upon 4 categories “Car Type”, “Road Name”, “Pack”, and “Area of Origin”. I was able to get the dropdown menus to work but they way I did it seems a bit cumbersome. Essentially I have 4 Jquery Ajax scripts one for each dropdown menu each tied to their own specific php file to run the query. Is there a way to consolidate these 4 files into perhaps 1 file that does the same thing? Below is my code.

Index.php (The car directory main page)

<html>
<head>
    <title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function showType(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","type.php?t="+str,true);
        xmlhttp.send();
    }
}
function showRoad(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","road.php?r="+str,true);
        xmlhttp.send();
    }
}
function showPack(str) {
    if (str == "") {
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else { 
        if (window.XMLHttpRequest) {
            // code for IE7+, Firefox, Chrome, Opera, Safari
            xmlhttp = new XMLHttpRequest();
        } else {
            // code for IE6, IE5
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        xmlhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                document.getElementById("txtHint").innerHTML = this.responseText;
            }
        };
        xmlhttp.open("GET","pack.php?p="+str,true);
        xmlhttp.send();
    }
}
</script>
<style type="text/css">
#infoPicture{
    width: 200px;
    height: 113px;
    float: left;
}
#infoInfo{
    height: 200px;
    width: auto;
    float: left;
}
</style>
</head>
<body>
    <form>
    <?php

include ("includes/dbh.inc.php");

//$query = "SELECT * FROM categories WHERE catagoryID = $catagoryID AND catagoryName = $catagoryName";
//Type Dropdown
$type = mysqli_query($conn, "SELECT * FROM types");
    echo '<select onchange="showType(this.value)" name"CarTypes">';
    echo '<option>' . 'Car Type' . '</option>';
    while ($row = mysqli_fetch_array($type)) {
    echo '<option value"' . $row('typeName') .'">' . $row('typeName') . '</option>';
    }

    echo '</select>';
//Road Dropdown
$road = mysqli_query($conn, "SELECT * FROM roads");
echo '<select onchange="showRoad(this.value)" name"RoadNames">';
    echo '<option>' . 'Road Name' . '</option>';
    while ($row = mysqli_fetch_array($road)) {
    echo '<option value"' . $row('roadName'). '">' . $row('roadName') . ' ('.$row('reportingMark'). ')</option>';
    }

    echo '</select>';
//Pack Dropdown
$pack = mysqli_query($conn, "SELECT * FROM packs");
echo '<select onchange="showPack(this.value)" name"AddonPack">';
    echo '<option>' . 'Add on Pack' . '</option>';
    while ($row = mysqli_fetch_array($pack)) {
    echo '<option value"' . $row('packID') .'">' . $row('packName') . '</option>';
    }

    echo '</select>';
//Origin Dropdown
$origin = mysqli_query($conn, "SELECT * FROM origins");
echo '<select onchange="showOrigin(this.value)" name"Origins">';
    echo '<option>' . 'Area of Origin' . '</option>';
    while ($row = mysqli_fetch_array($origin)) {
    echo '<option value"' . $row('originID') .'">' . $row('origin') . '</option>';
    }

    echo '</select>';
    ?>
    <a href="index.php">Show All</a>
</form>

Type.php I only included one of these as all four are essentially the same but with slightly different queries

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>

<?php 
include_once 'includes/dbh.inc.php';

if(isset($_GET('t'))){
    $t = $_GET('t');
    }else{
        $t = "Name not set in the GET method";
    }

$sql="SELECT * FROM rollingstock WHERE stockType = '".$t."'";
$result = mysqli_query($conn, $sql);

echo '<table border="0">';
if ($result-> num_rows > 0) {
    while ($row = $result-> fetch_assoc()) {
        //echo '<div class="listing-picture" style="background-color:#bbb">';
        echo '<tr><td>';
        echo '<img src="images/Coil_2.png"/>';
        echo '</td>';
        echo '<td width ="500">';
        echo $row("stockName");
        echo '<br>';
        echo $row("stockPack");
        echo '<br>';
        echo $row("stockLink");
        echo '<br>';
        echo $row("stockDesc");
        echo '</td></tr>';

    }
    echo '</table>';
    
}else{
    echo "Nothing Found!";
} 

 ?>
```