显示/隐藏div无法正常工作

我有一个问题让我的div显示在选择从下拉菜单中，我得到$ is not defined我调整了我的代码，没有重复的ID。当我加载页面时，它会显示所有3个div，但只要我从下拉列表中选择一个选项，它们就会全部隐藏。显示/隐藏div无法正常工作

JS：

$(document).ready(function(){ 
    $('#requiredOption').change(function(){ 
     $('#newwebsiteDiv,#websiteredevelopmentDiv,#otherDiv').hide(); 
     $(this).find('option:selected').attr('id') + ('Div').show(); 
    }); 
});

HTML：

<!DOCTYPE html> 
<head> 
    <meta charset="utf-8"> 
    <title>Template 2011</title> 
    <link rel="stylesheet" href="_assets/css/style.css"> 
</head> 
    <body> 
     <header> 
      <div id="logo">Template Here</div> 
       <nav> 
        <ul> 
         <li><a href="/">Home</a></li> 
         <li><a href="#">About Me</a></li> 
         <li><a href="quote.html">Free Quote</a></li> 
         <li><a href="#">Showcase</a></li> 
         <li><a href="#">Contact Me</a></li> 
        </ul> 
       </nav> 
     </header> 
         <section id="content"> 
      <h1>Free Quote</h1> 
       <p>Please fill out the below questionnaire to receive your free web development quote</p> 
        <form action="" method="post" accept-charset="utf-8"> 
         <select name="requiredOption" id="requiredOption"> 
          <option id="pleaseselect" value="pleaseselect">Please Select Your Required Quote</option> 
          <option id="newwebsite" value="newwebsite">New Website</option> 
          <option id="websiteredevelopment" value="websiteredevelopment">Website Redevelopment</option> 
          <option id="other" value="other">Other</option> 
         </select> 
         <p><input type="submit" value="submit"></p> 
        </form> 
         <section id="newwebsiteDiv"> 
          <p>New Website</p> 
         </section> 
          <section id="websiteredevelopmentDiv"> 
           <p>Website Redevelopment</p> 
          </section> 
           <section id="otherDiv"> 
            <p>Other</p> 
           </section> 

</section> 
      <section id="sidebar"> 
     <div id="box_one"> 
      <p>Box One</p> 
     </div> 
     <div id="box_two"> 
      <p>Box Two</p> 
     </div> 
     <div id="box_three"> 
      <p>Box Three</p> 
     </div> 
     </section>  
      <footer> 
       <p>This is the footer</p> 
      </footer> 
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script> 
      <script src="_assets/js/js.js" type="text/javascript"></script> 
</body>

来源

2011-09-19 Jess McKenzie

移动你的JS文件的HEAD –

的jQuery和js文件导入的事情是确定的; 首先，你的代码不包含任何元素包含id为 “选择”。你的隐藏代码想 '伊万'

$（ '＃newwebsite，＃websiteredevelopment，其他＃'）隐藏（）。所以你的代码应该是这样的：

$(document).ready(function(){ 
    $('#requiredOption').change(function(){ 
     $('#newwebsiteDiv,#websiteredevelopmentDiv,#otherDiv').hide(); 
     var targetDiv=$(this).find('option:selected').attr("id")+"Div" 
     $("#"+targetDiv).show(); 
    }); 
});

来源

2011-09-19 02:40:01 coonooo

我刚刚说了几句话:)但它仍然没有显示出于某种原因的股利。 –

我已经更新了我的问题 –

从上面的代码chrome拍摄，不会改变http://cl.ly/1Y1h1o0B10143E103Q0d –

把jQuery的包括在<head>。

也：

$('#newwebsite','#websiteredevelopment','#other').hide();

应该是：

$('#newwebsite, #websiteredevelopment, #other').hide();

来源

2011-09-19 02:23:56 evan

谢谢，我已经这样做了，但它仍然没有工作，它应该在页脚中使用

11. Javascript隐藏并显示表单无法正常工作

12. 显示/隐藏disqus按钮在firefox中无法正常工作

13. jquery隐藏和显示功能无法正常工作

14. 折叠隐藏/显示功能无法正常工作

15. jquery显示隐藏div下拉更改无法正常工作更新

16. JavaScript代码不能正常工作，无法隐藏/显示div内容

17. jQuery的隐藏无法正常工作

18. 隐藏md-down无法正常工作

19. 当iframe无法正常工作时关闭隐藏/切换div

20. 溢出：隐藏在一个div无法正常工作 - iOS

21. 隐藏div在jQuery Ajax成功中无法正常工作

22. 隐藏DIV在Opera中无法正常工作

23. Div无法正常显示

24. 显示/隐藏div无法按预期工作

25. 基于div显示隐藏不工作

26. 显示/隐藏DIV不工作

27. 显示方法无法正常工作

28. 显示/隐藏不正常

29. 隐藏工作不正常

30. 在列表视图中隐藏和显示列表项无法正常工作

显示/隐藏div无法正常工作

回答

相关问题