jQuery select:option why when I choice option one to show specific field but instead it open all fields?

Question

What I doing wrong ? Is there solution when I choice one specific option it only opens that specific field not all at same time ? My only solution is add DRY code

HTML

   <select type="type-switcher" name="type-switcher" id="js_type_switcher" class="product-type-switcher">
          <option value="type-switcher">Type Switcher</option>
          <option value="discs">discs</option>
          <option value="books">books</option>
          <option value="furnitures">furnitures</option>
        </select>              

And I have some fields what I need to show when I choice a needed select option

 <div name="size" class="form-field hide-form-field">
        <div class="form-field">
          <span>Size:</span>
          <input type="text" name="size">
        </div>                 


<div name="weight" class="form-field hide-form-field">
        <div class="form-field">
          <span>Weight:</span>
          <input type="text" name="weight">
        </div>            

<div name="dimensions" class="form-field hide-form-field">
        <div class="form-field">
          <span>Height:</span>
          <input type="text" name="dimensions-height">
        </div>             

CSS By default fields are hidden

 .show-form-field {
   display: unset;
  }            

jQuery Problem is that when I execute one of switch cases for instance "discs" instead of open only a disk attribute field, it open all fields! And Only solution what I could think of is to hide another two fields at each function but code get's pretty DRY . Is there a better solution when I choice case 'discs' it opens only size field and two others stay hide.

$('.product-type-switcher').on('change', function(){

let showDiscsSize = $('div[name="size"]').addClass("show-form-field");
let showBooksWeight = $('div[name="weight"]').addClass("show-form-field");
let showFurnituresDimensions = $('div[name="dimensions"]').addClass("show-form-field");

function showDiscAttribute() {
  showDiscsSize;
  //showBooksWeight.removeClass("show-form-field");
  //showFurnituresDimensions.removeClass("show-form-field");
}
function showBooksAttribute() {
  showBooksWeight;
  //showDiscsSize.removeClass("show-form-field");
  //showFurnituresDimensions.removeClass("show-form-field");
}
function showDimensionAttribute() {
  showFurnituresDimensions;
  //showDiscsSize.removeClass("show-form-field");
  //showBooksWeight.removeClass("show-form-field");
}

  switch($(".product-type-switcher option:selected").val()) {
    case 'type-switcher':
        $(".hide-form-field").removeClass("show-form-field");
        break;
    case 'discs':
        showDiscAttribute();
        break;
    case 'books':
        showBooksAttribute();
        break;
    case 'furnitures':
        showDimensionAttribute();
        break;
    default:
  }
});            

p.s I am totally beginer in programmer!

Answer 1

I have to suggest a few things first.

1. Three div closing tags are missing. Have to fix that first.

Div closing tag is missing for following tags.

<div name="size" class="form-field hide-form-field">
<div name="weight" class="form-field hide-form-field">
<div name="dimensions" class="form-field hide-form-field">

2. Before the user select any option input fields should be hidden

   .hide-form-field{ display: none; }

3. .product-type-switcher on change event should be enclosed within

   jQuery("document").ready(function(){

   });

4. Not sure about "let showDiscsSize", "let showBooksWeight", "let showFurnituresDimensions" these codes. I moved the ".addClass("show-form-field");" directly to the related function.

5. Every time option is selected first we have to remove the currently available "show-form-field". I added this inside the on change function. This will reset the previously display inputs and only will display, input field which is related to the currently selected input option.

   https://jsfiddle.net/5cpt1r0y/