动态表单生成图片预览效果

HTML

<div id="container">
  <h3>表单预览示例</h3>
  <!--表单定义区域-->
  <div class="left">
    <form>          
      请选择图片<br/>
      <select name="pic" class="click" id="photo">
        <option value="images/sample1.jpg">鸟鸣山更幽</option>
        <option value="images/sample2.jpg">花开花又落</option>
        <option value="images/sample3.jpg">春意又盎然</option>
      </select>
      <br/>
      添加描述性的文本
      <textarea id="title" class="click" name="title" cols="40" rows="4">
       请在这里输入描述性文本
       </textarea>
    </form>
  </div>
  <!--图片预览区域-->
  <div class="right">
    <div id="preview"> 预览图片
      <div id="image"></div>
      <div id="Displaytitle"></div>
    </div>
  </div>
  <div class="clear"></div>
</div>                       
                        

JS

$(document).ready(function(){          //页面就绪事件
    $('#preview').hide();	             //隐藏预览窗口的显示
    $("#photo").click(update);          //为下拉列表框关联click事件
    $("#title").keypress(update);       //为按钮放开关联keypress事件
});	
function update(){				        //通用的回调方法
    $('#preview').slideDown('slow');   //重新滑动显示预览区域
    var title = $("#title").val();     //获取标题内容
    var photo = $("#photo").val();     //获取照片路径
    $('#Displaytitle').html(title);    //更新要显示的标题
    //更新要显示的图片
    $('#image').html('<img src="'+photo+'" width=460 />');
}