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 />

当模糊不清时，如果我打开控制台并键入＆＃34; imageUpdate（）;＆＃34;它显示了图像。

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"
    });
}

显示所选选项的图像

1 个答案: