<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>fck</TITLE>
<META http-equiv="Content-Type" CONTENT="text/html; charset=utf-8" />
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
</HEAD>
<BODY>
<form>
<div>默认图片：<img src=""/><select></select></div>
<div>文章内容：<textarea>aa</textarea></div>
<div>添加图片：<input type="file" /></div>
<input type="button" value="显示内容"/>
<input type="button" value="隐藏图片"/>
</form>
<script language="javascript">
$(document).ready(function(){
$("#article_file").change(function(){
$("#article_content").append("<img src='"+$(this).val()+"'/>") ;
});
//文档改变事件
//$("#article_content").change()事件不起作用
$("#article_file").change(setSelect); //如果添加了新的图片，就改SELECT的选项
$("#b1").click(showContentImg);
$("#article_img").change(changeImg);
$("#b2").click(DelImg);
});
function showContentImg(){
$("#article_content>img").each(function(i){
alert(i+":"+$(this).attr("src"));
});
}
function setSelect(){
$("#article_img").empty();//清除所有子节点
$("#article_content>img").each(function(i){
$("#article_img").append("<option value='"+$(this).attr('src')+"'>"+$(this).attr('src')+"</option");
});
changeImg();
}
function changeImg(){
$("#article_img2").attr("src",$("#article_img").val()).show();
}
function DelImg(){
$("#article_img2").attr("src","").hide();
}
</script>
</BODY>
</HTML>
IE7 and FF but not the same as in effect
IE in effect:
FF in effect:
Responses to “HTML in AJAX using jQuery imitation effect”