Update the dropdown list on AJAX success function

Viewed 98

I have a Dropdown list where I choose the League and another dropdown which features the teams according to the league selected in the first dropdown. My problem is what to include in the success function of the AJAX Call to update the dropdown list with the selected league. Could anyone help me achieve this. Thanks

PHP DB Query / view_fixtures_queries.php

$league = '';

if(isset($_POST['selected'])):
   $league = $_POST['selected'];
endif;

$home_team = $dbh->prepare("SELECT * FROM teams WHERE competition = :league");

echo "<script>console.log($league)</script>";

$home_team->execute([ ':league' => $league ]);

$data  = $home_team->fetchAll();

print_r($data);

Fetching Teams in Teams Dropdown List

<?php
   while ($row = $home_team->fetchAll()) 
   {
       $hometeamlogo = $row['logo'];
       $hometeamstadium = $row['stadium'];
       echo "<option value='data:image/png;base64,".base64_encode( $hometeamlogo )."' data-stadium='$hometeamstadium'>" . $row['team_name'] . "</option>";
   }
?>

AJAX Call to send the selected league

//input_competition is the league dropdown
$('#input_competition').on('change', function () {
         var selectedLeague = $('#input_competition').find(":selected").text();
           
         $.ajax({
            url: 'queries/view_fixtures_queries.php',
            type: 'POST',
            data: {'selected' : selectedLeague},
            success: function(data) {
                //what to include here
                console.log(data);
            }
     });
});
0 Answers
Related