想要基于下拉框选择显示/隐藏多个div

Question

I've tried looking around and there are similar problems, but mine is way more simple, but yet, I can't find a solution within these forums. This is the dropdown markup.

<select id ="category_faq">
     <option value="1">item1</option>
     <option value="2">item2</option>
     <option value="3">item3</option>
</select>

The divs are as:

<div class="views-row-1"></div>
<div class="views-row-2"></div>
<div class="views-row-3"></div>

Now, while choosing item 1, only div views-row-1 should be displayed and hiding all other divs. when choosing item 2, only div views-row-2 should be displayed and hiding others. and so on....

the jquery i have used is as:

jQuery(document).ready(function($) {
      $('#category_faq').on('change',function() {
         if(this.value=='1')
            {
                $('.views-row-1').show();
            }
        else if (this.value=='2') 
             {
                $(".views-row-1").hide();
                $(".views-row-2").show();
                $(".views-row-3").hide();
            }
        else
             {
                $(".views-row-1").hide();
                $(".views-row-2").hide();
                $(".views-row-3").show();
             }

    }); 

}); 

This doesn't seem to work. Where could i be wrong?

Answer 1

You could reduce it to this:

$('#category_faq').on('change', function () {
    $('div').hide();
    $('div.views-row-' + $(this).val()).show()
});

jsFiddle example

Answer 2

I would give all of the divs you want to show/hide a common selector such as:

<div class="views-row views-row-1"></div> 
<div class="views-row views-row-2"></div>
<div class="views-row views-row-3"></div>

And then make each of the views-row be hidden unless it matches your clicked va:

$('#category_faq').on('change',function() {
   var val = $(this).val();
   $(".views-row").not('.views-row-'+val).hide() // Hide them all
   $(".views-row-"+val).show(); // Show if not already showing
}); 

Answer 3

http://jsfiddle.net/2gzm2q15/

$('div').hide();
$('.views-row-' + $('#category_faq').val()).show();
$('#category_faq').on('change', function () {
    $('div').hide();         
    $('.views-row-' + $(this).val()).show();
});

First you need to initialize it so the correct div is shown for the select menu's default value. When you change the menu just hide them all and only show the one you want.

Answer 4

Try this:

  $('#category_faq').on('change',function() {
      $('div[class!=views-row-]').hide();
      $('div.views-row-' + this.value).show();
  }); 

Working Fiddle