根据选择框的值显示隐藏的Div

所以我在表单中有一个select字段,我试图实现的是根据所选的值显示一个表单。

我的情况是,它们是条纹产品类型的表格。

这是我的表格:

<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都会出现,当我更改select both forms的值时,会消失吗?我试着重新命名,移动东西,但没有用,我不太确定我在这里哪里出错了?

如蒙协助,不胜感激。