如何从php下拉菜单中添加选择和更新图像

Question

I have a php dropdown menu that currently does not update and set the selected choice when one is made

it is populated from a database, I would like to be able to get the value of the selected choice so i can update the picture of the persons face (face to go with name) also need to know how to set selected option to just the selected option instead of to every one in the list here is what i have

$SQL = "SELECT id, name, facePic FROM people";
echo "<option>Select one</option>";
$res = $db->query($SQL);
while($row = mysqli_fetch_array($res)){
    $name = $row['name'];
    $id = $row['id'];
    $img = $row['facePic'];
    echo "<option value=".$id.">".$name."</option>";
}
echo "</select>";

any help is greatly appreciated

ps. i dont mind if i have to do it with something other than php as long as my dropdown is still populated from db

also i am planning to have the img show in a separate div but still in the same form

Answer 1

Not sure what you plan to do with 'facePic' as I don't see it in your output. For your PHP:

echo "<option>Select one</option>";
$res = $db->query($SQL);
while($row = $res->fetch_assoc()){
    echo "<option value='{$row['id']}' pic='{$row['facePic']}'>{$row['name']}</option>
";
}

Then in your JQuery:

$(function(){
  $("select").on("change", function(){
    $("#targetImage").attr("src", $(this).find("option:selected").attr("pic"));
  });

});