PHPクエリデータベース

Question

私は2つのコンテナを持っていますが、最初は選手の名前を含むフォーム（選択）、2つ目はそれらの選手に関連する画像用です。 ユーザーが選択値を変更すると、画像も特定のプレーヤーの画像に変わります。

私はこれをJQueryで作成しましたが、すべてがうまくいきますが、データベースを調べることに決めたプレーヤーの数が増えています。

私が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'>"); 
    } 
}); 

は今、私はこれが、PHP & MySQLでの再作成します。私はデータベースを作成した、データベースは3列で構成され、彼らは "id" "player_name" & "player_image"です。 （player_imageは画像へのリンクとして入力されます）

私はdbを照会でき、player_nameのフィールドをselect要素としてループすることができました。

<?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>"; 

?> 

素晴らしいことですが、私はまだdbから選手の画像リンクを取得し、リンクが付いたimgタグを作成する必要があります。

私の質問は、この（jQueryの）

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

を再作成し、上記の私の既存のPHPに追加することができます。

Answer 1

要素の画像のデータを保存する必要があります。

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

とあなたのjQueryで選択したオプションからアクセス...

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

選択したオプションはコンテキストで$(this)で利用可能であるべきです。そうでない場合は、.find(selectedValue)をデータ行に追加する必要があります。