显示所选选项中的图像

Question

我有一个通过 PHP 生成的选项列表，其中列出了一个文件夹中的所有图像。 我想这样做，当我在选项列表中选择图像时，图像将显示在上方，作为您选择的预览，我该如何实现？

<img class="imageNews" />
    <br />
    <br />
    <select name="image" id="image" class="form-control">
        <?php
            $files = array_map("htmlspecialchars", scandir("ts"));
            foreach ($files as $file) {
            echo '<option value="'.$file.'" onblur="imageUpdate();">'.$file.'</option>';
            }
        ?>
                    <script type="text/javascript">
            function imageUpdate(){
            var image=$("select#image").val();
            var path="ts/";
            var src=$("img.imageNews").attr({
            src: path + image,
            title: "Image",
            alt: "Image"
            });
            };
            </script>
    </select><br />

当它变得模糊时什么也没有发生，但是如果我打开控制台并输入“imageUpdate();” 它显示图像。

Answer 1

我会将事件附加到选择并使用 onchange 而不是 onblur。 我不认为你可以在选项上设置事件。

http://jsfiddle.net/n86rY/

<img class="imageNews" />
<br />
<br />
<select name="image" id="image" class="form-control" onChange="imageUpdate();">
    <option value="http://placekitten.com/200/300">http://placekitten.com/200/300</option>
    <option value="http://placekitten.com/100/300">http://placekitten.com/100/300</option>
    <option value="http://placekitten.com/100/100">http://placekitten.com/100/100</option>
    <option value="http://placekitten.com/20/100">http://placekitten.com/20/100</option>
</select>

Javascript

function imageUpdate() {
    var image = $("select#image").val();
    var path = "ts/";
    var src = $("img.imageNews").attr({
        src: path + image,
        title: "Image",
        alt: "Image"
    });
}