Question

这里我希望在显示或选择指定值时显示div，如果未选择指定值，则div应该隐藏。这是我的代码

<select name="result" id="result"  class="form-control select2" style="width: 70%" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="q">Q</option> 
</select>

这里是html

<div class="form-group" id="qaranty_count_full">
    <label for="recipient-name" class="col-form-label">Count:</label>
    <input type="number" required name="qaranty_count" class="form-control"  id="qaranty_count" value="1">
 </div>

这是脚本

 <script type="text/javascript">
  $(document).ready(function(){
   $('#qaranty_count_full').hide();
   $("#result").change(function(){
   if($('option:selected', this).val()=='q')
   {

     $('#qaranty_count_full').show();
     $('#qaranty_count').prop('required', true);
   }
   else
   {
     $('#qaranty_count_full').hide();
     $('#qaranty_count').prop('required', false);
   }

 });
});
</script>

在这种情况下，如果我第一次选择q，div变为可见，如果我选择q作为第二或第三值，则div不会显示，如果选择q，div应保持可见，希望理解我的问题

Answer 1

您可以尝试使用此代码。

$(document).ready(function(){
   $("#result").change(function(){
     if($.inArray("q", $(this).val()) !== -1){
        $('#qaranty_count_full').show();
        $('#qaranty_count').prop('required', true);
     }else{
        $('#qaranty_count_full').hide();
        $('#qaranty_count').prop('required', false);
      }
 });
});

这是我创建的一个codepen。

https://codepen.io/smitraval27/pen/BrpPPN

Answer 2

您可以使用.each执行此操作，并循环选定的数组。

Stack snippet

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="result" id="result"  class="form-control select2" style="width: 70%" multiple>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="q">Q</option> 
</select>

<div class="form-group" id="qaranty_count_full">
    <label for="recipient-name" class="col-form-label">Count:</label>
    <input type="number" required name="qaranty_count" class="form-control"  id="qaranty_count" value="1">
 </div>
 
 <script type="text/javascript">
  $(document).ready(function(){
   $('#qaranty_count_full').hide();
   $("#result").change(function(){

     $('#qaranty_count_full').hide();
     $('#qaranty_count').prop('required', false);
     
     $('option:selected', this).each(function(i,sel){     
       if ($(sel).val() == 'q') {
         $('#qaranty_count_full').show();
         $('#qaranty_count').prop('required', true);
       }
     });
 });
});
</script>

如果在多个选择中选择了一个speciefied值，则显示div

2 个答案: