简单的 div 根据菜单选择隐藏或显示

发布于 2024-11-10 08:19:21 字数 992 浏览 2 评论 0原文

这应该很容易......但我花了一天的大部分时间试图弄清楚它。使用 jQuery：代码是这样的：

<tr> 
  <select name="exist_author" class="exist_author">     
     <option value="select">Select</option>
     <option value="new_auth">I cant find my author</option>
     <option value="2">Tom Wolf</option>
     <option value="1">Frank Baum</option> 
  </select>
</tr>       

<script type="text/javascript">         
  $(document).ready(function(){             
     $("#new_author").css("display","none");             
     $(".exist_author").change(function(){
         var test = $(this).val();
         if(test !== 'new_auth') {
            $("#new_author").fadeOut("slow");       
         } 

         else {
            $("#new_author").fadeIn("slow");        
         }
     });
  });
</script>

<tr id="new_author">Text to Show on 'I cant find my author' menu selection</tr>

我已经淡入以处理选择，但它立即淡出。

原文

This should be easy...but I have spent the better part of the day trying to figure it out. Using jQuery: The code is like this:

<tr> 
  <select name="exist_author" class="exist_author">     
     <option value="select">Select</option>
     <option value="new_auth">I cant find my author</option>
     <option value="2">Tom Wolf</option>
     <option value="1">Frank Baum</option> 
  </select>
</tr>       

<script type="text/javascript">         
  $(document).ready(function(){             
     $("#new_author").css("display","none");             
     $(".exist_author").change(function(){
         var test = $(this).val();
         if(test !== 'new_auth') {
            $("#new_author").fadeOut("slow");       
         } 

         else {
            $("#new_author").fadeIn("slow");        
         }
     });
  });
</script>

<tr id="new_author">Text to Show on 'I cant find my author' menu selection</tr>

I have gotten the fade in to work on the selection, but it immediately fades back out.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

温馨耳语 2024-11-17 08:19:21

似乎不支持淡出 TR，请尝试以下操作：

<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">         
  $(document).ready(function(){             
     $("#new_author").css("display","none");             
     $(".exist_author").change(function(){
         var test = $(this).val();
         if(test !== 'new_auth') {
            $("#new_author").fadeOut("slow");       
         } 

         else {
            $("#new_author").fadeIn("slow");        
         }
     });
  });
</script>

</head>
<body>

<table>
<tr><td>
  <select name="exist_author" class="exist_author">     
     <option value="select">Select</option>
     <option value="new_auth">I cant find my author</option>
     <option value="2">Tom Wolf</option>
     <option value="1">Frank Baum</option> 
  </select>
</td><td>
<table>
<tr ><td id="new_author" style="color:red">this one</td></tr>
<tr id="test1"><td>content</td></tr>
<tr id="test2"><td>content</td></tr>
</table>
</td></tr></table>
</body>
</html>

Looks like fading a TR isn't supported, try this:

<html>
<head>
<script src="jquery.js"></script>
<script type="text/javascript">         
  $(document).ready(function(){             
     $("#new_author").css("display","none");             
     $(".exist_author").change(function(){
         var test = $(this).val();
         if(test !== 'new_auth') {
            $("#new_author").fadeOut("slow");       
         } 

         else {
            $("#new_author").fadeIn("slow");        
         }
     });
  });
</script>

</head>
<body>

<table>
<tr><td>
  <select name="exist_author" class="exist_author">     
     <option value="select">Select</option>
     <option value="new_auth">I cant find my author</option>
     <option value="2">Tom Wolf</option>
     <option value="1">Frank Baum</option> 
  </select>
</td><td>
<table>
<tr ><td id="new_author" style="color:red">this one</td></tr>
<tr id="test1"><td>content</td></tr>
<tr id="test2"><td>content</td></tr>
</table>
</td></tr></table>
</body>
</html>

回复收藏 0 原文