如果指定值之一 select 出现在多个 select 中，则显示 div

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);
      }
 });
});

这是我创建的代码笔。

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

Answer 2

您可以这样做，使用 .each，并循环选择的数组。

堆栈片段

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

如果指定值之一 select 出现在多个 select 中，则显示 div

show div if one of the speciefied value selected in multiple select

php

jquery

codeigniter-3

visible