Java jsp 下拉图片框是怎么做到的？

想做有头像的注册页面， 头像想用下拉图片框显示，怎么实现？
或者想用一个普通下拉单，然后又图像预览，不过我不太会脚本，没有作用，请各位大牛帮忙。
//（估计会有很多错的）脚本
<script type="text/javascript">
      var name = "head0";
      function getURL(){ 
        name = document.getElementById('head');
        document.getElementById('try').innerHTML="<img src = \"images/"+name+"\.jpg\" width= \"69\" height= \"69\" >";     
      } 
      window.onload=getURL;  
    </script> 
//显示部分的代码
<p id="part_title"> 修改昵称</p>
          <p>
          <label>新头像:</label>
          <select id = "head" name = "head" size = "1" action = getURL>
            <option value = "head0">head0</option>
            <option value = "head1">head1</option>
            <option value = "head2">head2</option>
            <option value = "head3">head3</option>
            <option value = "head4">head4</option>
            <option value = "head5">head5</option>
            <option value = "head6">head6</option>
            <option value = "head7">head7</option>
            <option value = "head8">head8</option>
            <option value = "head9">head9</option>
            <option value = "head10">head10</option>
            <option value = "head11">head11</option>
            <option value = "head12">head12</option>
            <option value = "head13">head13</option>
          </select>
          </p>
          <p> 
            <label>头像预览<div id='try'><img src="images/head0.jpg" width="69" height="69"></div></label>
          </p>

解决方案 »

  1.   

    <html>
    <head>
    <script>
    function changeHeader(){
     var select = document.getElementById("head");
     var image = document.getElementById("image");
     var index = select.selectedIndex;
    image.src = "head"+index+".png";
    }
    </script></head>
    <body><select id = "head" name = "head" size = "1" onchange="changeHeader()">
      <option value = "head0">head0</option>
      <option value = "head1">head1</option>
      <option value = "head2">head2</option>
      <option value = "head3">head3</option>
      <option value = "head4">head4</option>
      <option value = "head5">head5</option>
      <option value = "head6">head6</option>
      <option value = "head7">head7</option>
      <option value = "head8">head8</option>
      <option value = "head9">head9</option>
      <option value = "head10">head10</option>
      <option value = "head11">head11</option>
      <option value = "head12">head12</option>
      <option value = "head13">head13</option>
      </select>
    <br>
    <img src="head0.png" width="69" height="69" id="image">
    </body>
    </html>