PHP查询数据库

I have two containers, the first is a form (select) that contains names of players, the second is for images related to those players. When a user changes the select value the image also changes to that particular players image.

I have created this in JQuery and everything works wonderful but with the amount of players I decided to look into databases.

To get a better understanding here's a short version of what I have in JQuery.

<select id="clubPlayers" name="clubPlayers"></select>

var PLAYER_NAMES = [
    "Player 1",
];

var players = '';
for (var i=0;i<PLAYER_NAMES.length;i++){
    players += '<option value="'+ PLAYER_NAMES[i] + '">' + PLAYER_NAMES[i] +     '</option>';
    PLAYER_NAMES.sort();
}
$('#clubPlayers').append(players);

// Players
$('#clubPlayers').on('change', function() {
    $('.player-img>img').remove();
    if ( this.value == 'Player 1'){
        $(".player-img").append("<img src='players/player_1.png'>");
    }
});

Now I want to recreate this but in PHP & Mysql. I have created a database, the database consists of 3 columns, They are "id" "player_name" & "player_image". (player_image will be input as links to images)

I got as far as being able to query the db and loop the player_name's field as select elements.

<?php

$conn = new mysqli('localhost', 'root', '', 'players') 
or die ('Cannot connect to db');

$result = $conn->query("SELECT id, player_name, player_image FROM player_info");


echo "<select id='clubPlayers' name='clubPlayers'>";

while ($row = $result->fetch_assoc()) {

              unset($id, $player_name, $player_image);
              $id = $row['id'];
              $player_name = $row['player_name']; 
              $player_image = $row['player_image']; 
              echo '<option value="'.$player_name.'">'.$player_name.'</option>';

}

echo "</select>";

?>

That works great but I still need to get the players image link from the db and create an img tag with the link.

My question is, Can this (JQUERY)

$('#clubPlayers').on('change', function() {
    $('.player-img>img').remove();
    if ( this.value == 'Player 1'){
        $(".player-img").append("<img src='players/player_1.png'>");
    }
});

be recreated and added onto my existing PHP above.

You need to store the data of the image on the element.

$player_image = $row['player_image']; 
echo '<option value="'.$player_name.'" data-image="'. $player_image .'">'.$player_name.'</option>';

and in your jQuery you access it from the selected option...

$('#clubPlayers').on('change', function() {
  var image = $(this).data('image');
  $('.player-img>img').remove();
  $(".player-img").append("<img src='players/"+ image +"'>");
});

The selected option should be available in $(this) in context. If not, you'll need to add a .find(selectedValue)into the data line.