PHP/MySQL 数据库 - 下拉显示图像答案

【问题标题】：PHP/MySQL Database - Dropdown display imagesPHP/MySQL 数据库 - 下拉显示图像
【发布时间】：2015-07-26 05:51:51
【问题描述】：

我正在尝试创建一个简单的网页，当您在下拉菜单中选择产品名称时，该网页将显示特定图像。图像名称将与数据库中的 ID 号匹配：例如，ID 为“1”的产品需要回显“1.png”，ID“2”将是“2.png”等。在数据库中，ID 名称当前设置为 ID。我目前有一个连接到 MySql 数据库的工作下拉菜单，代码如下。

func.inc.php

<?php

include_once 'db.inc.php';

function connect(){
    mysql_connect(DB_HOST,DB_USER,DB_PASS) or die('Could not connect to the database ' . mysql_error());
    mysql_select_db(DB_NAME);
}
function close(){
    mysql_close();
}
function query(){
    $myData = mysql_query("SELECT * FROM cadbury_products");
    while($record = mysql_fetch_array($myData)){
        echo '<option value="' . $record['ID'] . '">' . $record['NAMEOFPRODUCT'] . '</option>';
        }
}
?>

index.php

<?php
include_once 'func.inc.php';
connect();?>
<!doctype html>
<html>
<head>
<title>Dropdown Menu Test</title>
</head>

<body>
<section>
<article>
<hgroup>
</hgroup>
<p align="center">
    <select name="dropdown">
        <?php query() ?>
    </select>
        <?php close() ?>
</p>
</article>
<article>
</article>
</section>
</body>
</html>

【问题讨论】：

你有什么问题？
抱歉 - 我想知道如何触发下拉菜单，这样当从下拉菜单中选择某个产品时，它会自动显示与 MySQL 数据库中产品 ID 匹配的图像。我发布的代码是当前的 PHP 下拉菜单，因此我希望使用它在下拉菜单上方显示图像。

标签： php html mysql image

【解决方案1】：

使用jQuery可以获取选择框的值，并将图片的SRC值替换为图片的新链接。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<select name="dropdown" id="dropdown">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
</select>
<img id="image" src="" />
<script type="text/javascript">
$(function(){
    $( '#dropdown' ).change(function(){
        $( '#image' ).attr( 'src', $( this ).val() + ".png" );
    })
});
</script>

测试示例。

【讨论】：