How to change the contents of some tables when selecting options in multistate / table

My question is the following, I have a code where I load the names of a database in a drop-down:

<div class="pure-u-4-5">
<div class="pure-control-group">
<label id="idtype" for="multi-state">Type</label>
<?php 
selectDB("test_type", "", "id", "name", "SELECT * FROM batteries", 0, true);
?>
<br>
</div> 

On the other hand, in a table where I load other elements of other tables related by ids:

<table id="tableTest" onclick="doWatch()" style="height: 5%" border="1" class="pure-table" >
<thead> <tr height="10px">
<td><a href="tests.php?sort=name">Related Tests</a></td>
</tr>
</thead> 
<tbody>

<?php
// Echo variables

 $sort = isset($_GET['sort']) ? $_GET['sort'] : 'id';

$conn = connectDB();

$query = "SELECT * FROM batteries b, batteries_tests bt, test_types tt "
"where b.id=bt.batteries_id AND bt.tests_id=tt.id";
debug_to_console($query);

$i=0;
 $results = mysql_query($query);
debug_to_console(mysql_error());

if (!$results) {

} else {
 while ($row = mysql_fetch_array($results)) {
if ($i%2 != 0){
echo "<tr class='pure-table-odd' height='10px'>";
}
else{
echo "<tr height='10px'>";
}
?>
<td style="width: 20%;" align="center"><?php echo $row['name'] ?></td>
</tr>
<?php
$i++;
}
}
 mysql_close($conn);
?>
</tbody>
</table>

And in turn I have another table where I also load more items related to the previous table, but I do not attach it because with the above I think I can explain my problem. Well, I would like to know how I can make appear in my query only elements related to the option selected in the multi state, I imagine that in the onchange () event I must indicate to the table which option I have selected but I do not know how. I simply want that if in the multi state you select for example: "plantain", the table shows the types of banana that there are, and then if in that table you see "the one from the Canary Islands" in the other table the colors of canary bananas there. I also add my SelectDB where I put my idea of onchange = \ "hiddenOption (); \

function selectDB($name, $type, $fieldValue, $tagValue, $query, $indexSelected, $enable) {

global $servername;
global $username;
global $password;
global $dbname;

$conn = connectDB();

$results = mysql_query($query);
if ($enable == true)
{
$data = "<SELECT class=\"input\" $type name=\"$name\" style=\"width: 300px\" onchange=\"hiddenOption();\" >";
}
else
{
$data = "<SELECT class=\"input\" $type name=\"$name\" style=\"width: 300px\" onchange=\"hiddenOption();\" disabled=\"disabled\" >";
}
echo $data;
    //debug_to_console($data);
    //debug_to_console("results: $results" );

$data = "<OPTION VALUE=\"0\" selected>All          ";
echo $data;

$i = 0;
while ($row = mysql_fetch_array($results)) {

$data = "<OPTION VALUE=\"$row[$fieldValue]\"> $row[$tagValue]";

        //debug_to_console($indexSelected);
        //debug_to_console($i);

if ($i+1 == $indexSelected)
{
$data = "<OPTION VALUE=\"$row[$fieldValue]\" selected> $row[$tagValue]";

            //debug_to_console("data");
        }
        else
        {
            //debug_to_console("else");
        }
        echo $data;
        //debug_to_console($data);
        $i++;
    }
    echo "</SELECT>";

    mysql_close($conn);
}