Показать скрытый Div на основе значения select_box

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. # означает, что вы выбираете на основе идентификатора. Здесь good и service фактически являются классами для двух элементов div. Поэтому вам нужно использовать . вместо
2. Если вы хотите использовать селектор id, вы можете определить атрибут id для этих двух элементов с одинаковыми именами good и service. Тогда # тоже будет работать.

Также проверьте, правильно ли вы получаете значение в $(this).val(), выполнив console.log($(this).val())