Javascript代码现在允许“其他墓碑颜色”的第二个下拉选项显示下面的表单行。它仅适用于第一个下拉选项“ Other Cemetery”,我如何更改JS以使其包含多个“ Other Option”。我的JS值有问题吗?在此先非常感谢您的任何提示或更正。
$(".seeAnotherField").change(function () {
if (($(this).val() == "Other Cemetery") | "Other Headstone Color") {
$(".otherFieldDiv").show();
$(".otherField").attr("required", "");
$(".otherField").attr("data-error", "This field is required.");
} else {
$(".otherFieldDiv").hide();
$(".otherField").removeAttr("required");
$(".otherField").removeAttr("data-error");
}
});
$(".seeAnotherField").trigger("change");
<form class="p-3">
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label for="seeAnotherField" class="control-label custom_label col-xs-12">Cemetery</label>
<select name="cemetery" class="form-control seeAnotherField">
<option value="select" selected="selected">Select Cemetery</option>
<option value="Akatarawa">Akatarawa</option>
<option value="Taita">Taita</option>
<option value="Wainuiomata">Wainuiomata</option>
<option value="Whenua Tapu">Whenua Tapu</option>
<option value="Makara">Makara</option>
<option value="Karori">Karori</option>
<option value="St Johns">St Johns</option>
<option value="Awa Tapu">Awa Tapu</option>
<option value="Paraparaumu">Paraparaumu</option>
<option value="Other Cemetery">Other Cemetery</option>
</select>
</div>
</div>
<div class="form-row otherFieldDiv">
<div class="form-group col-md-6 offset-md-3 mx-auto otherField">
<input type="text" class="form-control" name="cemetery" placeholder="Type Other Cemetery" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label for="seeAnotherField" class="control-label custom_label col-xs-12">Headstone - Stone Color</label>
<select name="headstone_color" class="form-control">
<option value="headstone_color" selected="selected">Select Headstone - Stone Color</option>
<option value="Black">Black</option>
<option value="African Grey">African Grey</option>
<option value="Platinum Blue">Platinum Blue</option>
<option value="Blue Pearl">Blue Pearl</option>
<option value="Emerald Pearl">Emerald Pearl</option>
<option value="White Pearl">White Pearl</option>
<option value="Imperial Red">Imperial Red</option>
<option value="Balmoral Red">Balmoral Red</option>
<option value="G603-Chinese White/Grey">G603-Chinese White/Grey</option>
<option value="Other Headstone Color">Other Headstone Color</option>
</select>
</div>
</div>
</form>