我有這段代碼使選擇欄位“restaurant”僅在“location”中選擇“pf II”和“pf II - extension”時出現。我想在選擇“pf II - extension”時洗掉“restaurant”中的 RR 選項，有人可以幫我在選擇“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>
uj5u.com熱心網友回復：
您可以像這樣將條件應用于餐廳的值
$('#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>轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/529145.html