如何在表单选择框上更改显示图像

时间:2016-01-25 22:46:31

标签: php jquery forms

我尝试在表单中创建一个选择框,并在旁边的选择框中显示所选的图像。我知道它需要jquery或其他东西,我不知道它是什么。如果有人可以帮助或指出我正确的方向,那将是非常棒的!

<table width="100%">
    <tr>
        <td>
            <select id="icon" name="icon" class="form-control select2">
            <?php foreach ($icons as $icon) { ?>
                <option value="<?php echo $icon['link']; ?>">
                    <?php echo $icon['name']; ?>
                </option>
            <?php } ?>
            </select>
        </td>
        <td align="center" id="iconPreview">
            Image Here
        </td>
    </tr>
</table>

我找到了这个jquery片段,但它没有显示任何变化...

JQuery的:

<script>
     $(document).ready(function() {
       $("#icon").change(function() {
         $("#iconPreview").empty();
         if ( $("#icon").val()!="" ){
            $("#iconPreview").append("<img src=\"" + $("#icon").val()  + "\" />");
         }
         else{
            $("#iconPreview").append("displays image here");
         }
       });
     });
</script>

1 个答案:

答案 0 :(得分:1)

如果要在头部使用jQuery,则需要添加jQuery,因此在<head>的文档中添加以下行:

<script src="http://code.jquery.com/jquery-1.12.0.min.js"></script>

然后在类中给出想要图像的TD:

<td class="imageHere" align="center" id="seleced_image">

然后,在您页面的底部(或.js页面,如果您想链接它)添加:

<script>
    $(function(){
        $('#icon').change(function(){
            var image = $('#icon').val();
            $('#seleced_image').html("<img src='" + image + "' alt='description' />");
        });
    });
</script>

这个jQuery说“每次#icon下拉列表更改时,都会将图片加载到<td>

这是最简单的方法,无需学习任何jQuery。否则,我建议你学习jQuery或更好,javascript。

所做的更改: 在这种情况下,使用ID比使用类更好。