从下拉列表中选择每个用户更改输出数据

I am having the most difficult time figuring this out and I definitely need to figure it out as I plan on using it a lot in the future.

I have a drop down box and in that option box, I have all of the users that I want to display. I then have input boxes underneath of that that I am outputting how many wins and losses that user has.

As of now, all of the users I want to display output in the option box and the wins and losses output, but if I try to select a new user to see their data, the output does not change. I didn't know whether to put this in this category or Javascript as I'm sure I will need AJAX to do this, so that I do not need to reload the page, but where should I go from here to make this work?

try {
//Prepare
 $con = mysqli_connect("localhost", "", "", "");
if ($stmt = $con->prepare("SELECT * FROM team_rankings WHERE user_id=user_id")) {

    $stmt->execute();
    $stmt->bind_result($ranking_id, $ranking_user_id, $ranking_firstname, $ranking_username, $ranking_division, $ranking_wins, $ranking_losses); 

    //var_dump($stmt);

    if (!$stmt) {
        throw new Exception($con->error);
    }

$stmt->store_result();
    echo "<select name = 'member'>";
    while ($row = $stmt->fetch()) {

     echo "<option value = '{$ranking_user_id}'";
        echo ">{$ranking_firstname}</option>";
    }
    echo "</select>";


    }   else {
        echo "<p>There are not any team players yet.</p>";
        }
}
catch (Exception $e)
{
    echo "Error: " . $e->getMessage();
}
?><br><br>
    <label>Wins
        <input type="text" value="<?php echo $ranking_wins; ?>">
    </label>
    <label>Loss
        <input type="text" value="<?php echo $ranking_losses; ?>">
    </label>

Your php file would be like this. You need to make new file other then you are using to load first page. If other things are effecting this code please comment.

<?php

if(isset($_POST['userID'])){
    try {
    //Prepare
     $con = mysqli_connect("localhost", "", "", "");
    if ($stmt = $con->prepare("SELECT * FROM team_rankings WHERE user_id=".$_POST['userID'])) {

        $stmt->execute();
        $stmt->bind_result($ranking_id, $ranking_user_id, $ranking_firstname, $ranking_username, $ranking_division, $ranking_wins, $ranking_losses); 


        if (!$stmt) {
            throw new Exception($con->error);
        }

    $stmt->store_result();
    $result = array();

        while ($row = $stmt->fetch()) {

        $result["win"] = $ranking_wins;
        $result["losses"] = $ranking_losses;         

        }


        }   
    }
    catch (Exception $e)
    {
        echo "Error: " . $e->getMessage();
    }

echo json_encode($result);
}

?>

Html part, including jquery code. Here you can trigger on change function for select which will send userID to php file and receive JSON data. Then you can assign that values to your inputs. You need to include jquery library to work with this.

<script>
$(document).ready(function(){
    $("select[name='member']").on("change",function(){
        $.post("PHP file Path",{userID:$("select[name='member']").val()},function(data){
            var result = JSON.parse(data);
            $("#win").val(result.win);
            $("#losse").val(result.losse);

            });
        }); 
});

</script>

<label>Wins
<input type="text" value="<?php echo $ranking_wins; ?>" id="win">
</label>
<label>Loss
<input type="text" value="<?php echo $ranking_losses; ?>" id="losse">
</label>