JQuery "siblings()" Not Selecting Properly

I have a SELECT form element "options" with a number of items "option#". I would like to show/hide divs below it based on what option is selected.

I have the following JQuery code:

  $(document).ready(function(){
    $("#form").validate();
	$('#option1').hide();
	$('#option2').hide();
	$("#options").change(function(){
		$("#" + this.value).show('slow').siblings().hide();
	});
	$("#options").change();
  });

Code (markup):

          <select name="options" id="options">
          	<option value="none" selected="selected">-- Select One --</option>
            <option value="option1">Option 1</option>
            <option value="option2">Option 2</option>
          </select>
<p id="option1">Show 1 if selected</p>
<p id="option2">Show 2 if selected</p>

HTML:

The problem is that whenever I select options 1 or 2, it erases the entire form and shows only the related p tag text. This leads me to believe that "siblings()" isn't properly selecting the elements.

Can anyone shed light onto what I'm doing wrong here?

Thanks in advance!

 

I don't use jQuery, but looking at your code, your <select> block is a sibling of your <p> blocks... so therefore it is hiding it.... I don't see why the following would not work:

  $(document).ready(function(){
    $("#form").validate();
	$('#option1').hide();
	$('#option2').hide();
	$("#options").change(function(){
	             $('#option1').hide();
	             $('#option2').hide();
		$("#" + this.value).show('slow');
	});
	$("#options").change();
  });

Code (markup):

or alternatively, keep your original code, but change HTML to:

<select name="options" id="options">            
    <option value="none" selected="selected">-- Select One --</option>            
    <option value="option1">Option 1</option>            
    <option value="option2">Option 2</option>          
</select>
<div id="response">
    <p id="option1">Show 1 if selected</p>
    <p id="option2">Show 2 if selected</p>
</div>

Code (markup):

to explain this further:

<parent>
    <child1></child1>
    <child2></child2>
    <child3>
          <grandchild1></grandchild1>
          <grandchild2></grandchild2>
    </child3>
</parent>

Code (markup):

child1,child2,child3 are all siblings (they belong to the same parent)
grandchild1 and grandchild2 are also siblings....

 

Thank you so much for the fix and explanation! Works like a charm now...

 

no worries...