[jQuery] On page load, <option selected> show corresponding div
Hi All,
I have the script working, but I think it can be done to be more
efficient...and this where I am stuck. The script currently either
slides up/down two divs with check boxes in them. A #brProducts which
has check boxes for bridge materials, and #bProducts which has
building materials. I need this for when entering data b/c you can't
have building products used in bridges and vice versa. The script
also clear the checks if they decided to enter a different
buildings.
<script type="text/javascript">
$(document).ready(function(){
var opt1 = $("#brProducts");
var opt2 = $("#bProducts");
opt1.hide();
opt2.hide();
$("# anype").ready(function(){
var hearValue = $("#sType option:selected").val();
if( hearValue == "Bridges"){
opt1.show();
opt2.hide();
}else{
opt2.hide();
opt1.show();
}
});
$("#sType").change(function(){
var hearValue = $("#sType option:selected").val();
if( hearValue == "Bridges"){
opt1.slideDown('slow');
opt2.slideUp('slow');
$("#bProducts").clearForm();
$("#specialItems").clearForm();
}else{
opt2.slideDown('slow');
opt1.slideUp('slow');
$("#brProducts").clearForm();
$("#specialItems").clearForm();
}
});
});
</script>