javascript - 根据 select_box 的值显示隐藏的 Div

Question

所以我在表单中有一个选择字段，我想要实现的是根据所选值显示一个表单。

在我看来，它们是条纹产品类型的形式。

这是我的表格:

<select name="product[product_type]" id="product_product_type" class="bg-gray-200 text-center">
  <option value="">Select Prod. Type</option>
  <option value="good">Physical Goods</option>
  <option value="service">Electronic Product</option>
</select>

<div class="w-full lg:w-2/3 bg-white p-4 rounded shadow-md types good">
  TEST NEW GOOD Product
</div>
<div class="w-full lg:w-2/3 bg-white p-4 rounded shadow-md types service">
  TEST NEW SERV Product
</div>

这是我尝试用来填充的 jQuery..

$(function() {
  $('#product_product_type').change(function(){
    $('.types').hide();
    $('#' + $(this).val()).show();
  });
});

所以当我登陆表单时，两个 div 都会出现，当我更改选择的值时，两个表单都会消失吗？我尝试过重命名和移动内容，但都无济于事，我不太确定哪里出错了？

如有任何帮助，我们将不胜感激。

Answer 1

尝试以下操作

$('.' + $(this).val()).show();

1. # 表示您正在根据 id 选择。这里 good 和 service 实际上是两个 div 元素的类。因此，您需要使用 . 代替
2. 如果您想使用 id 选择器，您可以在这两个 div 上定义 id 属性，并使用相同的名称 good 和 服务。然后 # 也可以工作。

同时通过 console.log($(this).val()) 检查您是否在 $(this).val() 中获得了正确的值>