Can’t get value of select list with Javascript when it is created using PHP array from database

If I generate a select list using PHP from the results of a database query, for some reason I can’t then use Javascript to get the value of the currently selected item. I tested this code with a static list and it works no problem. Here is my code:

<?php
    require_once("config.php");

    $sql="SELECT * FROM animals ORDER BY name ASC"; 
    try
    {
        $stmt = $DB->prepare($sql);
        $stmt->execute();
        $results = $stmt->fetchAll(PDO::FETCH_UNIQUE); //each column is addressed by the primary key
    }
    catch (Exception $ex)
    {
        echo $ex->getMessage();
    }
?>
<html>
<head>
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
    </script>
    <script>
        $(document).ready(function(){  
            $("#animal_list").change(function(){
                 var animalValue = $(this).val(); 
                 window.location.href="animal_list.php?id=" + animalValue;
            });
        });
    </script>
</head>
<body>
    <select id="animal_list" name="animal_list">
        <?php
            foreach($results as $res)
            {
        ?>
            <?php echo '<option value="'. $res['id'] . '">' ?>
                <?php echo $res['name']  ?>
            </option>

        <?php
            }
        ?>
    </select>
    <br/><br/>
    <?php
        if(isset($_GET['id']))
        {
            echo '<input type="text" id="npsw_code" value="' . $_GET['id'] . '" readonly>';
        }
        else
            echo '<input type="text" id="npsw_code" value="" readonly>';
    ?>

</body>
</html>

Testing with a static list works. Here is the example:

<html>
<head>
    <script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous">
    </script>
    <script>
        $(document).ready(function(){  
            $("#fruits").change(function(){
                 var fruitValue = $(this).val(); 
                 window.location.href="fruits.php?id=" + fruitValue;
            });
        });
    </script>
</head>
<body>
    Fruits
    <select id="fruits" name="fruits">
        <option value="0">Apple</option>
        <option value="1">Pear</option>
        <option value="2">Watermelon</option>
        <option value="3">Orange</option>
    </select>
    <br/><br/>
    <?php
        if(isset($_GET['id']))
        {
            echo 'My Fruit <input type="text" id="myfruit" value="' . $_GET['id'] . '" readonly>';
        }
        else
            echo 'My Fruit <input type="text" id="myfruit" value="" readonly>';
    ?>
</body>
</html>

Can’t get value of select list with Javascript when it is created using PHP array from database