php - 动态自动选择，在其他地方更改图像

Question

这只是我对让平凡的输入字段变得有趣的想法。

好的，我们有一个输入元素，并且我们有预先传播的带有 id 、 name 和 image name 的小型数据库表

这就是我的想法。

我们有一个输入元素，用户可以在其中开始输入。让我们说APPL...

使用 APPLE 下拉(用于弹出实时自动建议)，他们选择 APPLE 并在页面其他位置的另一个 div 元素中，图像 div 显示 apple.png

同样，如果他们选择蕉，类似的，banana.png也会显示在该div中。

好吧，我们现在得到了什么。

嗯，我有自动建议(实时搜索自动完成)，一切都很好。

我的输入元素正在运行，他们可以在输入时从建议中进行选择。

我不知道如何使用(我想可能是ajax)嗯..或其他方法，一种在其他地方显示图像的方式，反射(reflect)他们所做的选择。

让事情变得更容易。

所有自动完成都与图像文件名完全相同，因此:

APPLE 变成 apple.pngCAKE 变成 cake.php

我确信 js 可以在这里提供帮助。只是不知道如何。我本以为 getElementById

无论如何..有时，提出问题可能会引起做过类似事情的人的回应。

无法显示代码，因为我要创建的元素尚不存在。

但为了简单起见，我们采用选择框方法:

<select id="fruit" name="fruit">
                                <option value="">Please select a Fruit</option>
                                <option value="apple">Apple</option>
                                <option value="cake">Cake</option>
                            </select>

目前的自动建议、自动完成如下所示:

<div class="field"><label for="fruit">Pick a Fruit </label> 

感谢任何帮助...

Answer 1

您可以使用 jQuery 轻松完成此操作。复制下面的代码示例并将其粘贴到 html 文件的 body 标记之间。将“myselector”元素的选项值替换为您自己的选项值。当您从下拉菜单中选择一个项目时，图像将动态变化。

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>

<script type="text/javascript" language="javascript">
$(function() {
    $("#myselector").change(function() { // Assign a handler.
        if ($("#myselector").val() != '') {
            $("#myimage").attr('src', $("#myselector").val()); // Change the image.
        }
    });
});
</script>

<select name="myselector" id="myselector">
    <option value="">Select Image</option>
    <option value="http://www.gravatar.com/avatar/e2f0c2f013205c397a7b00bc3012a027?s=32&d=identicon&r=PG">Image 1</option>
    <option value="http://www.gravatar.com/avatar/06383b51463f855d7cc0f07d4566bd42?s=32&d=identicon&r=PG">Image 2</option>
</select>

<img name="myimage" id="myimage" src="http://www.gravatar.com/avatar/c259fe3371bba238ad95021e67741e9c?s=32&d=identicon&r=PG" />