Show/hide div not working
I am having an issue getting my div's to show on select from the drop down menu, I am getting $ is not def开发者_如何学Goined 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>
Put the jQuery include in the <head>.
also:
$('#newwebsite','#websiteredevelopment','#other').hide();
should be:
$('#newwebsite, #websiteredevelopment, #other').hide();
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();
});
});
I would do something like this:
$(function() {
$('#requiredOption').change(function() {
var divToHide = "#" + $(this).val() + "Div";
$(divToHide).show()
.siblings('#newwebsiteDiv, #websiteredevelopmentDiv, #otherDiv')
.hide();
});
});
加载中,请稍侯......
精彩评论