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

我试着四处看看，也有类似的问题，但我的方法更简单，但我无法在这些论坛中找到解决方案。这是下拉标记

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

---

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

您可以将其简化为：

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

---

我会给所有要显示/隐藏的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>

首先需要初始化它，以便为选择菜单的默认值显示正确的div。更改菜单时，只需将其全部隐藏，并仅显示所需的菜单。

尝试以下操作：

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

---

工作

一个问题是，值与==和数字之间没有空格

（this.value='2'）

，而不是您当前的

（this.value='2'）

，对于1来说也是一样。工作正常@Aibrean，这没有问题。。。这没什么区别！如果值为，则他不会隐藏div1@AnoopJoshi-当选择其他任何一个时，他是。我只是在加载时隐藏了它们，但是使用CSS你可以很容易地更改。我谈到了他的当前实现。如果用户选择选项2，那么选择选项1。您的代码将只显示div 1。但他的代码将同时显示1和2。@AnoopJoshi-我只是在做他要求的事情，“现在，在选择项目1时，只显示div views-row-1并隐藏所有其他div。在选择项目2时，只显示div views-row-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>

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

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

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