HTML 表单 使用 JS 脚本选择下拉选项和隐藏表单字段，但不显示在 PHP 表单中

Question

>最近，我在 Stack 的帮助下在 JS 中设置了一个脚本，当我从上面的下拉选项中选择名为"其他"的选项时，会显示标记为"其他"的表单行。示例如下。这适用于一个下拉列表。但是一旦我添加了另一个下拉菜单和"其他"表单行，JS 代码就会中断，并且第一个或第二个表单下拉选项都不会发布到数据库，并且表单行"其他"不会显示。我希望我已经正确解释了这个问题。我本质上希望一个JS脚本对所有下拉表单重复，因此当选择"其他"选项值时，我希望表单行"其他"显示在下面，以便可以输入自定义数据。使用 Bootstrap 4.3.1 与所有 JS 查询插件一起工作。当 datbase 只是一个文本字段时，发布数据没有问题。所以我希望有人可以解决，我会有很多下拉菜单，"其他"表单行将不同的表单数据发布到数据库中。非常感谢。

<script>
function handleSelect() {
document.getElementById("other").value = document.getElementById("mySelect").value;
var selected = document.getElementById("mySelect").value;
var details = document.getElementById("other-details");

if (selected === "") {
details.classList.remove("d-none");
details.classList.add("d-block");
} else {
details.classList.remove("d-block");
details.classList.add("d-none");
}
}
</script>
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Cemetery</label>
<select name="cemetery" class="form-control" id="mySelect" onchange="handleSelect();">
<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</option>
</select>
</div>
</div>
<div class="form-row d-none" id="other-details">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="cemetery" />
</div>
</div>
<div class="form-row">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<label class="control-label custom_label col-xs-12">Headstone - Stone Color</label>
<select name="headstone_color" class="form-control" id="mySelect" onchange="handleSelect();">
<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</option>
</select>
</div>
</div>
<div class="form-row d-none" id="other-details">
<div class="form-group col-md-6 offset-md-3 mx-auto">
<input type="text" id="other" class="form-control" name="headstone_color" />
</div>
</div>

Answer 1

请检查选择 ID。这两个选择都具有与 MySelect 相同的 ID。该 id 必须是唯一的。因此，请使您的代码通用并使用一些唯一的ID。

谢谢

像这样的东西？

<script>
function handleSelect() {
document.getElementById("other1").value = document.getElementById("mySelect1").value;
var selected = document.getElementById("mySelect1").value;
var details = document.getElementById("other-details1");
document.getElementById("other2").value = document.getElementById("mySelect2").value;
var selected = document.getElementById("mySelect2").value;
var details = document.getElementById("other-details2");

if (selected === "") {
details.classList.remove("d-none");
details.classList.add("d-block");
} else {
details.classList.remove("d-block");
details.classList.add("d-none");
}
}
</script>

等等？？