Home/ Questions/Q 6580517
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T16:02:21+00:00

I am having an issue getting my div’s to show on select from the

  • 0

I am having an issue getting my div’s to show on select from the drop down menu, I am getting $ is not defined I have adjusted my code to not have duplicate ids. When I load the page it shows all 3 divs but as soon as I select an option from the drop down they all go and hide.

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    the jquery and js file import thing is ok;
    first,your code not include any element contains id “select”.your hide code should like ‘evan’

    $(‘#newwebsite,#websiteredevelopment,#other’).hide();
    so your code should like this:

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