Question

我有问题从下拉菜单中选择显示我的div，我得到$ is not defined我已经调整了我的代码，没有重复的ID。当我加载页面时，它会显示所有3个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>

Answer 1

将jQuery include放在<head>。

中

也：

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

应该是：

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

Answer 2

jquery和js文件导入的东西是可以的; 首先，你的代码不包含任何包含id“select”的元素。你的隐藏代码应该像'evan'

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

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

Answer 3

我会做这样的事情：

$(function() {
  $('#requiredOption').change(function() {
    var divToHide = "#" + $(this).val() + "Div";
    $(divToHide).show()
      .siblings('#newwebsiteDiv, #websiteredevelopmentDiv, #otherDiv')
        .hide();
  });
});

显示/隐藏div不起作用

3 个答案: