JQuery 可编辑下拉列表实现

js代码

<script type="text/javascript">
	$(document).ready(function(){
		$("#org_span").toggle(function(){
			$(this).children("img").attr("src","../image/pic/add.gif");
			$("#orgdiv").addClass("hidden");
		},function(){
			$(this).children("img").attr("src","../image/pic/div.gif");
			$("#orgdiv").removeClass("hidden");
		});
		
		$("#des_span").toggle(function(){
			$(this).children("img").attr("src","../image/pic/add.gif");
			$("#desdiv").addClass("hidden");
		},function(){
			$(this).children("img").attr("src","../image/pic/div.gif");
			$("#desdiv").removeClass("hidden");
		});
		
		$("div tr").hover(function(){
			$(this).addClass("hover");
		},function(){
			$(this).removeClass("hover");
		});
		
		$("#orgtab tr").click(function() { 
                $(this).children("td").each(function() { 
                    $("#orgid").val($(this).text());
                    $("#orgdiv").addClass("hidden");
                    $("#org_span").children("img").attr("src","../image/pic/add.gif");
                }) 
            }); 
        $("#destab tr").click(function() { 
                $(this).children("td").each(function() { 
                    $("#desid").val($(this).text());
                    $("#desdiv").addClass("hidden");
                    $("#des_span").children("img").attr("src","../image/pic/add.gif");
                }) 
            }); 
	});
</script>

HTML部分

<tr>
   <th scope="row">
    来文单位
   </th>
   <td align="left">
    <input type="text" name="origin" id="orgid" class="txt"
     value="${doc.origin}" />
    <span id="org_span"><img src="../image/pic/add.gif" />
    </span>
   </td>
  </tr>

  <tr>
   <td>
    <div id="orgdiv" class="div hidden">
     <table id="orgtab">
      <s:iterator id="ls" value="#session.deplist" status="st">
       <tr>
        <td>
         <s:property value="#ls.deptname" />
        </td>
       </tr>
      </s:iterator>
      <s:iterator id="ls" value="#request.sub_dept_list" status="st">
       <tr>
        <td>
         <s:property value="#ls.sub_deptname" />
        </td>
       </tr>
      </s:iterator>
     </table>
    </div>

   </td>
  </tr>