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

时间:2015-04-16 23:40:31

标签: javascript php jquery html

我有一个php下拉菜单,当前没有更新并设置所选的选项

它是从数据库填充的,我希望能够获得所选择的选项的值,这样我就可以更新人脸的图片(面对名称)还需要知道如何设置所选的选项只选择选定的选项而不是列表中的每个选项 这就是我所拥有的

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

非常感谢任何帮助

PS。我不介意我是否必须使用除php以外的其他东西,只要我的下拉列表仍然从db填充

我也打算将img节目放在一个单独的div中,但仍然采用相同的形式

2 个答案:

答案 0 :(得分:0)

如果我正确理解了您的问题,您想根据下拉列表的值更新图片吗?

如果是这样,你可以做的是使用jQuery,如下所示: (让我们说图片标签的id为#image,图片名称的格式为id.jpg&#34;)

var image_src = $("select").val();
$("#image").attr("src", image_src);

当然,如果你想使用显示给用户的实际值(在你的情况下是$ name),那么而不是使用

$("select").val();

你需要使用

$("select option:selected").text(); 

答案 1 :(得分:0)

不确定你打算用'facePic'做什么,因为我在你的输出中没有看到它。对于你的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>\r\n";
}

然后在你的JQuery中:

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

});