下拉框值改变触发隐藏和显示

最新推荐文章于 2023-02-09 11:20:47 发布

原创最新推荐文章于 2023-02-09 11:20:47 发布 · 3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #JavaScript #jquery #jQuery #JQUERY #Jquery

jQuery 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种利用jQuery库实现网页中特定元素显示与隐藏的方法。通过选择器选取元素并根据用户的选择来动态调整其可见性状态。适用于需要根据不同条件展示不同内容的场景。

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.7.min.js"></script>
<script type="text/javascript">
                           $(document).ready(function(){
						   $("#p1,#p2").hide();
						          $("#sf").change(function(){
								        var a=$("#sf").val();
								  
								  if(a=="1")
								  {
								        $("#p1,#p2").hide();
								  }else
								  {
								       $("#p1,#p2").show();
								  }

								  });
                                  
						   })
</script>
<body>
         <div>
		           <p	id="p0">选择省份:
				   <select  id="sf">

		           <option value="1">请选择省份</option>

				   <option value="2">北京</option>

				   <option value="3">上海</option>

		           </select>
				   </p>
				   <p	id="p1">本科规模:<input type="text" id="bkgm"/></p>
				   <p   id="p2">专科规模:<input type="text" id="zkgm"/>
				          <input type="button" id="bt1" value="保存"/>	<input type="button" id="bt2" value="删除">
				   </p>
		 </div>
</body>
</head>
</html>