从动态下拉列表框中显示图像 [英] Display image from dynamic drop down list box

问题描述

我试图在网页上显示图像，其中图像路径存储在 MySQL 表(表列名称-位置)中.但我无法显示图像.

I am trying to display image on web page where image path is stored in MySQL table (table column name-location). but I can't able to display the image.

我有一个动态下拉列表框，其中填充了所有图像名称.我想在用户单击此下拉列表中的图像名称后显示图像.如果我放置 img src 的完整路径，那么我可以从 HTML 表中看到我的图像.以下是到目前为止我尝试获取输出的代码.

I have a dynamic drop down list box where it populated all the image name. I want to display the image once the user click on the image name from this drop down list. If I place the full path to the img src, then I can able to see my image from the HTML table. Below is my code so far i tried to get output.

您的建议将帮助我完成我的任务.需要你的帮助来更新我的知识.

Your advice will help me to complete my task. Need your help to update my knowledge.

$(function () {
        $("#Code").change(function () {
            $("#image").load("image.php?choice=" + $("#Code").val());
        });
    });

index.php

<?php

mysql_connect('890.23.89.100', 'root', '');
mysql_select_db('abc');

$sql = "SELECT Code,location FROM Product_List ORDER BY Code ASC";
$result = mysql_query($sql);

echo "<select id='Code' name='Code' style='width: 120px'>";
while ($row = mysql_fetch_array($result))
{
    echo "<option value='" . $row['Code'] . "'>" . $row['Code'] . "</option>";

}
echo "</select>";

?>

<img
    src="../label_image/6015.jpg (??? how to get the image path here. i put thos manually and can display the image on webpage)"
    width="100%" height="100%">

图片.php

<?php

$username = "root";
$password = "";
$hostname = "890.23.89.100";

$dbhandle = mysql_connect($hostname, $username, $password) or die("Unable to connect to MySQL");
$selected = mysql_select_db("abc", $dbhandle) or die("Could not select examples");
$choice = mysql_real_escape_string($_GET['choice']);

$query = "SELECT location FROM Product_List WHERE Code='$choice'";

$result = mysql_query($query);

while ($row = mysql_fetch_array($result))
{
    echo "<option>" . $row{'location'} . "</option>";
}
?>

推荐答案

这里有一个简单的方法可以在下拉菜单中更改图像，我们假设每个代码都有一个图像名称，例如 code1 具有图像 code1.jpg 等:

Here is a simple way to changing image in drop down, we assume that each code has an image name like code1 has image code1.jpg etc.:

<select onchange="document.getElementById('Code').src = this.value">
    <option value="code1.jpg">image 1</option>
    <option value="code2.jpg">image 2</option>
    <option value="code3.jpg">image 3</option>
    <option value="code4.jpg">image 4</option>
</select>

<img id="Code" src="code1.jpg">

在

编辑如果你想完全控制你的 img 属性并按照你想要的方式自定义它，可以通过不同的方式完成.如果我们仍然想保持简单并以与示例相同的方式进行操作，我们可以像示例一样使用 innerHTML:

And here is how to implement it in your code, I have chosen to do use mysqli statement, if you prefer to use other ways, just do minor modification the concept is the same, we assume also that location field contains image path and image name:

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "dummy";

$conn = new mysqli($servername, $username, $password, $dbname);

if ($conn->connect_error)
    die("Connection failed: " . $conn->connect_error);

$sql = "SELECT code, location FROM product_list ORDER BY code ASC";
$result = $conn->query($sql);

echo '<select onchange="document.getElementById(\'Code\').src = this.value">';
while ($row = $result->fetch_assoc())
    echo '<option value="' . $row['location'] . '">' . $row['code'] . '</option>';
echo '</select>';

$conn->close();

?>

<!--code1.jpg is defalut image-->
<img id="Code" src="code1.jpg">

这里将是您对 php 的新实现:

EDIT If you want to have full control over your img property and customize it the way you want, it can be done different ways. If we still want to keep it simple and do it on the same way of our example, we could use innerHTML like the example:

PHP 部分

And here will be your new implementation to php:

HTML 部分

echo '<select onchange="document.getElementById(\'code\').innerHTML = this.value">';
while ($row = $result->fetch_assoc())
    echo '<option value="<img id=' . $row['location'] . ' src=' . $row['location'] . '>">' . $row['code'] . '</option>';
echo '</select>';

这篇关于从动态下拉列表框中显示图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！