How to enable certain fields on mutliselect drop down selection in rails form

Question

I have form which rails form which contains a multiselect dropdown. Now based on the dropdown values selected I want to enable certain fields

This is my form view

  <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>

Here in the type_of_brand id field which is a multiselect, based on the selected value, I want to enable the hidden fields

So I wrote my javascript as follows:

 <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>

But it doesn't seem to do anything.The problem here is, it enables only one field, whichever is selected first

Any help!

Answer 1

The issue is that $(this).val() returns an array of selected values for multiple selects so you need to iterate it.

 $(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>