我尝试在表单中创建一个选择框,并在旁边的选择框中显示所选的图像。我知道它需要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>
答案 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比使用类更好。