Question

我试过四处寻找并且存在类似的问题，但我的方法更简单，但是，我在这些论坛中找不到解决方案。这是下拉标记。

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

div是：

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

现在，在选择第1项时，只应显示div views-row-1并隐藏所有其他div。选择第2项时，只应显示div views-row-2并隐藏其他内容。等等....

我使用过的jquery是：

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();
             }

    }); 

});

这似乎不起作用。我哪里错了？

Answer 1

您可以将其减少到：

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

<强> jsFiddle example

Answer 2

我会给你想要显示/隐藏公共选择器的所有div，例如：

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

然后将每个视图行隐藏起来，除非它与您点击的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();
});

首先需要对其进行初始化，以便为选择菜单的默认值显示正确的div。当您更改菜单时，只需将它们全部隐藏起来，只显示您想要的菜单。

Answer 4

试试这个：

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

工作Fiddle

想要根据下拉框选择显示/隐藏多个div

4 个答案: