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

Question

Here i want the div to be shown if the specified value is present or selected and the div should be hide if the specified value is not selected.
here is my code
<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>
here is 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>
Here is the script
<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>
in this case if i choose q first time the div becomes visible and if i choose q as second or third value the div is not becoming visible,the div should remain visible if q is selected,hope understood my problem

Answer 1

You can try this code.
$(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);
}
});
});
Here is a codepen I have created.
https://codepen.io/smitraval27/pen/BrpPPN

Answer 2

You could do like this, using .each, and loop the selected array.
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>