javascript - 如何在 rails 表单中启用 multiselect 下拉选择的某些字段

Question

我有 form which rails 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>

这里是多选的type_of_brand id 字段，根据选择的值，我想启用隐藏字段

所以我写了我的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>