Как включить определенные поля в выпадающем списке мутлиселекта в форме рельсов

Question

У меня есть форма, которая формирует рельсы, которая содержит выпадающий список с несколькими выборками. Теперь на основании выбранных выпадающих значений я хочу включить определенные поля

Это мой вид формы

  <div class="field"> 9.
    <label> Types of Packaging Water Brand Sold : </label>
    <select class="form-control" id="type_of_brand" multiple="multiple" 
    name="user[type_of_brand][]">
      <option value="Bisleri">Bisleri</option>
      <option value="Aquafina">Aquafina</option>
      <option value="Kinley">Kinley</option>
      <option value="Bindu">Bindu</option>
      <option value="local">Local</option>
      <option value="others">Others</option>
    </select>
  </div><br/>

  <div class="field"> 
    <div id="Bisleri" class ="hidden">
      <label> Cost of Bisleri : </label>
      <input type="number" name="users[cost][Bisleri][half_litre]"> 
      Half litres: </input>
      <input type="number" name="users[cost][Bisleri][half_litre]"> 1 
      litres: <input>
      <input type="number" name="users[cost][Bisleri][half_litre]"> 2 
      litres: <input>
    </div>
    <div id="Aquafina" class ="hidden">
      <label> Cost of Aquafina : </label>
      <input type="number" name="users[cost][Aquafina][half_litre]"> 
      Half litres: </input>
      <input type="number" name="users[cost][Aquafina][half_litre]"> 1 
      litres: <input>
      <input type="number" name="users[cost][Aquafina][half_litre]"> 2 
      litres: <input>
    </div>
    <div id="Kinley" class ="hidden">
      <label> Cost of Bisleri : </label>
      <input type="number" name="users[cost][Kinley][half_litre]"> Half 
      litres: </input>
      <input type="number" name="users[cost][Kinley][half_litre]"> 1 
      litres: <input>
      <input type="number" name="users[cost][Kinley][half_litre]"> 2 
      litres: <input>
    </div>
    <div id="Bindu" class ="hidden">
      <label> Cost of Bisleri : </label>
      <input type="number" name="users[cost][Bindu][half_litre]"> Half 
      litres: </input>
      <input type="number" name="users[cost][Bindu][half_litre]"> 1 
     litres: <input>
      <input type="number" name="users[cost][Bindu][half_litre]"> 2 
    litres: <input>
     </div>
    <div id="local" class ="hidden">
      <label> Cost of Bisleri : </label>
      <input type="number" name="users[cost][local][half_litre]"> Half 
      litres: </input>
      <input type="number" name="users[cost][local][half_litre]"> 1 
      litres: <input>
      <input type="number" name="users[cost][local][half_litre]"> 2 
    litres: <input>
    </div>
    <div id="others" class ="hidden">
      <label> Cost of Bisleri : </label>
      <input type="number" name="users[cost][others][half_litre]"> Half 
      litres: </input>
      <input type="number" name="users[cost][others][half_litre]"> 1 
      litres: <input>
       <input type="number" name="users[cost][others][half_litre]"> 2 
      litres: <input>
    </div>
  </div>

Здесь, в поле id type_of_brand, который является множественным выбором, основываясь на выбранном значении, я хочу включить скрытые поля

Итак, я написал свой JavaScript следующим образом:

 <script type="text/javascript">
   $(function() {
   $("#type_of_brand").on("change", function() {
   var select_val = $(this).val();
   console.log(select_val);
   var data = "#" + select_val"
    $(data).removeClass("hidden");
  });
  });
</script>

Но, похоже, он ничего не делает. Проблема в том, что он включает только одно поле, в зависимости от того, что выбрано первым

Любая помощь!

Answer 1

Проблема в том, что $(this).val() возвращает массив выбранных значений для множественного выбора, поэтому вам нужно повторить его.

$(function() {
  $("#type_of_brand").on("change", function() {
    var selected_values = $(this).val();

    // add hidden to divs
    $(".field > div").addClass("hidden");

    // remove hidden from selected divs
    selected_values.forEach(function(val) {
      var id = "#" + val;
      $(id).removeClass("hidden");
    });
  });
});

.hidden {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="field"> 9.
  <label> Types of Packaging Water Brand Sold : </label>
  <select class="form-control" id="type_of_brand" multiple="multiple" name="user[type_of_brand][]">
    <option value="Bisleri">Bisleri</option>
    <option value="Aquafina">Aquafina</option>
    <option value="Kinley">Kinley</option>
    <option value="Bindu">Bindu</option>
    <option value="local">Local</option>
    <option value="others">Others</option>
  </select>
</div><br/>

<div class="field">
  <div id="Bisleri" class="hidden">
    <label> Cost of Bisleri : </label>
    <input type="number" name="users[cost][Bisleri][half_litre]"> Half litres: </input>
    <input type="number" name="users[cost][Bisleri][half_litre]"> 1 litres: <input>
    <input type="number" name="users[cost][Bisleri][half_litre]"> 2 litres: <input>
  </div>
  <div id="Aquafina" class="hidden">
    <label> Cost of Aquafina : </label>
    <input type="number" name="users[cost][Aquafina][half_litre]"> Half litres: </input>
    <input type="number" name="users[cost][Aquafina][half_litre]"> 1 litres: <input>
    <input type="number" name="users[cost][Aquafina][half_litre]"> 2 litres: <input>
  </div>
  <div id="Kinley" class="hidden">
    <label> Cost of Kinley : </label>
    <input type="number" name="users[cost][Kinley][half_litre]"> Half litres: </input>
    <input type="number" name="users[cost][Kinley][half_litre]"> 1 litres: <input>
    <input type="number" name="users[cost][Kinley][half_litre]"> 2 litres: <input>
  </div>
  <div id="Bindu" class="hidden">
    <label> Cost of Bindu : </label>
    <input type="number" name="users[cost][Bindu][half_litre]"> Half litres: </input>
    <input type="number" name="users[cost][Bindu][half_litre]"> 1 litres: <input>
    <input type="number" name="users[cost][Bindu][half_litre]"> 2 litres: <input>
  </div>
  <div id="local" class="hidden">
    <label> Cost of Local : </label>
    <input type="number" name="users[cost][local][half_litre]"> Half litres: </input>
    <input type="number" name="users[cost][local][half_litre]"> 1 litres: <input>
    <input type="number" name="users[cost][local][half_litre]"> 2 litres: <input>
  </div>
  <div id="others" class="hidden">
    <label> Cost of Others : </label>
    <input type="number" name="users[cost][others][half_litre]"> Half litres: </input>
    <input type="number" name="users[cost][others][half_litre]"> 1 litres: <input>
    <input type="number" name="users[cost][others][half_litre]"> 2 litres: <input>
  </div>
</div>