使用jQuery显示/隐藏<div>

Question

I have the code that's below. Each of the div tags is set by the CSS to display: none; , nothing else. I want the select box to show only the selected div and its contents, but hide the rest of them. I feel like I'm just missing something simple, but I can't figure it out. I'm using jQuery 1.8.1. Thanks in advance!

As a note, I edited this link's code for my purposes. I'm not phenomenal with javascript, which is why this is likely terrible.

<script type="text/javascript">
$(document).ready(function(){
$("#choices").change(function(){

if ($(this).val() == "option1" ) {

    $("#option1").slideDown("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option2" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideDown("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option3" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideDown("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option4" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideDown("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option5" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideDown("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option6" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideDown("fast");
    $("#option7").slideUp("fast");

} 

if ($(this).val() == "option7" ) {

    $("#option1").slideUp("fast");
    $("#option2").slideUp("fast");
    $("#option3").slideUp("fast");
    $("#option4").slideUp("fast");
    $("#option5").slideUp("fast");
    $("#option6").slideUp("fast");
    $("#option7").slideDown("fast");

} 

});
</script>
random body text
<form>
<select id="choices">
    <option value="none">Select one...</option>
    <option value="option1">Option 1</option>
    <option value="option2">Option 2</option>
    <option value="option3">Option 3</option>
    <option value="option4">Option 4</option>
    <option value="option5">Option 5</option>
    <option value="option6">Option 6</option>
    <option value="option7">Option 7</option>
</select>
</form>
    <div id="option1" class="hide">Opt 1 Text</div>
    <div id="option2" class="hide">Opt 2 Text</div>
    <div id="option3" class="hide">Opt 3 Text</div>
    <div id="option4" class="hide">Opt 4 Text</div>
    <div id="option5" class="hide">Opt 5 Text</div>
    <div id="option6" class="hide">Opt 6 Text</div>
    <div id="option7" class="hide">Opt 7 Text</div>

Answer 1

You are using class selector for selecting element by ID, you should use # instead of . , jQuery selectors work like CSS selectors. You can also minify your code.

$("#choices").change(function(){ 
   $('.hide').slideUp();
   $('#'+this.value).slideDown()
});

http://jsfiddle.net/X7AbR/

Answer 2

your selector is using:

$('.optionX')

when it should be:

$('#optionX')

this is because 'optionX' is an ID and not a class. if it were a class, '.optionX' would work.

Answer 3

wow... Someone hasn't heard of DRY ("Don't Repeat Yourself"). One simple loop will kill all of that code:

$("#choices").change(function() {
  for( var i=1; i<=7; i++) {
      $("#option"+i)["slide"+($(this).val() == "option"+i ? "Down" : "Up")]("fast");
  }
});

Also note I fixed your problem: .choices refers to any element with choices in the Class Name. #choices refers to the element with the ID choices .

Answer 4

You're using the wrong css selectors to get the elements.

$(".choices").change(function(){

The . selector selects elements by classname, and you have no elements with the class "choices", what you want here is $("#choices") which selects by id.

The same applies to your option selections, where you select by class with . while you have elements with the ids that should be selected with #

Resources:

jQuery id-selector

jQuery class-selectors

jQuery selectors

Answer 5

Your selectors are wrong. You are using ids in your html, but classes in your jquery. To fix it change

$(".choices") to $("#choices")

$(".optionX") to $("#optionX")

Example fiddle: http://jsfiddle.net/johnkoer/UDKrA/10/

Answer 6

Build your selector dynamically and employ the .siblings() method:

$("#choices").change(function(){ // that's an ID, not a class
    var val = $(this).val();
    $('#'+val).slideDown('fast').siblings('.hide').slideUp('fast');
});

http://jsfiddle.net/mblase75/QkNX4/