Простой div скрыть или показать на основе выбора меню - PullRequest
Новая
       20

Простой div скрыть или показать на основе выбора меню

0 голосов
/ 26 мая 2011

Это должно быть легко ... но я потратил большую часть дня, пытаясь понять это. Использование 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>

Я получил затухание, чтобы работать над выделением, но оно сразу же исчезло.

Ответы [ 2 ]

0 голосов
/ 26 мая 2011

Надеюсь, для простоты вы опускаете теги td, иначе это просто недопустимый HTML.И я действительно не понимаю, зачем вам вообще использовать таблицу вместо div.

В любом случае, внутри вашего тэга td, который должен отображать текст, поместите этот текст в div и передайте ему id"new_author" (удалите этот идентификатор из тега tr).

Кроме того, не помещайте скрипт между тегами tr.Поместите его в заголовок или прямо перед закрытием тега body.

0 голосов
/ 26 мая 2011

Похоже, исчезновение 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>
...