JQuery 可编辑下拉列表实现

最新推荐文章于 2025-07-01 13:07:50 发布

lynanhai

最新推荐文章于 2025-07-01 13:07:50 发布

阅读量142

点赞数

CC 4.0 BY-SA版权

文章标签： jQuery JavaScript HTML ViewUI

本文链接：https://blog.youkuaiyun.com/lynanhai/article/details/83535757

本文介绍了一段JavaScript代码，该代码实现了通过点击事件切换显示隐藏元素，并改变图标状态的功能。此外，还演示了如何使用jQuery选择器进行DOM操作及响应鼠标悬停事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>