Issue
I have this code that makes the select field "restaurant" appear only when selecting "pf II" and "pf II - extension" in "location". I would like to remove the RR option in "restaurant" when selecting "pf II - extension", can someone help me make it appear again when selecting "pf II"?
$('#location').on('change', function () {
let locationValue = $('#location').val();
if (locationValue == "PF II" || locationValue == "PF II-extensão") {
$("#restaurant option[value='RR']").remove();
$("#restaurant").removeAttr('disabled');
$('#restaurantSelect').show();
$("#restaurant").val("");
} else {
$("#restaurant").attr('disabled', 'disabled');
$('#restaurantSelect').hide();
$("#restaurant").val("A");
}
})
HTML
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<div class="form-row">
<!-- LOCATION -->
<div class="form-group col-md-12 col-sm-12 col-12">
<label for="location" i18n-key="pages.leftovers.location"></label>
<select required name="location" id="location" class="form-control">
<option value="PF I">PF I</option>
<option value="PF II">PF II</option>
<option value="PF II-extensão">PF II - EXTENSÃO</option>
<option value="PF III"> PF III</option>
<option value="RF">RF</option>
</select>
</div>
</div>
<div id="restaurantSelect">
<div class="form-row">
<!-- RESTAURANT -->
<div class="form-group col-md-12 col-sm-12 col-12">
<label for="restaurant" i18n-key="pages.counters_temp.restaurant"></label>
<select required name="restaurant" id="restaurant" class="form-control">
<option value="A">A</option>
<option value="B">B</option>
<option value="RR">RR</option>
<option value="Lavanderia">Lavandeira</option>
</select>
</div>
</div>
</div>
Solution
You can apply the condition on values of restaurant like this
$('#location').on('change', function() {
let locationValue = $('#location').val();
if (locationValue == "PF II" || locationValue == "PF II-extensão") {
if(locationValue == "PF II"){
$("#restaurant option[value='RR']").show()
}
else{
$("#restaurant option[value='RR']").hide()
}
$("#restaurant").removeAttr('disabled');
$('#restaurantSelect').show();
$("#restaurant").val("");
} else {
$("#restaurant option[value='RR']").hide();
$("#restaurant").attr('disabled', 'disabled');
$('#restaurantSelect').hide();
$("#restaurant").val("A");
}
})<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<div class="form-row">
<!-- LOCATION -->
<div class="form-group col-md-12 col-sm-12 col-12">
<label for="location" i18n-key="pages.leftovers.location"></label>
<select required name="location" id="location" class="form-control">
<option value="PF I">PF I</option>
<option value="PF II">PF II</option>
<option value="PF II-extensão">PF II - EXTENSÃO</option>
<option value="PF III"> PF III</option>
<option value="RF">RF</option>
</select>
</div>
</div>
<div id="restaurantSelect">
<div class="form-row">
<!-- RESTAURANT -->
<div class="form-group col-md-12 col-sm-12 col-12">
<label for="restaurant" i18n-key="pages.counters_temp.restaurant"></label>
<select required name="restaurant" id="restaurant" class="form-control">
<option value="A">A</option>
<option value="B">B</option>
<option value="RR">RR</option>
<option value="Lavanderia">Lavandeira</option>
</select>
</div>
</div>
</div>Answered By - Syed Arsalan Hussain Answer Checked By - Mary Flores (PHPFixing Volunteer)
Posts
0 Comments:
Post a Comment
Note: Only a member of this blog may post a comment.