Javascript 如何让用户能够添加其他选择数据？

我有一个选择下拉菜单，用户选择其中一个选项，然后显示相关的表单输入

以下是html：

<select id="relative" name="relative">
    <option>Select relative</option>
    <option value="father">father</option>
    <option value="mother">mother</option>
    <option value="brother">brother</option>
</select>

<div id="relative_sections">
    <div id="father">
        <input type="text" id="father_name" name="father_name" placeholder="Name" />
        <input type="email" id="father_email" name="father_email" placeholder="Email" />
        <input type="number" id="father_phone" name="father_phone" placeholder="phone" />
    </div>
    <div id="mother">
        <input type="text" id="mother_name" name="mother_name" placeholder="Name" />
        <input type="email" id="mother_email" name="mother_email" placeholder="Email" />
        <input type="number" id="mother_phone" name="mother_phone" placeholder="phone" />
    </div>
    <div id="brother">
        <input type="text" id="brother_name" name="brother_name" placeholder="Name" />
        <input type="email" id="brother_email" name="brother_email" placeholder="Email" />
        <input type="number" id="brother_phone" name="brother_phone" placeholder="phone" />
    </div>
</div>

更改选定选项时显示/隐藏部分的Javascript代码：

<script type="text/javascript">
    function hideAllChildrenButOne(parentId, toRevealId) {
         var children = document.getElementById(parentId).children;
         for (var i=0; i<children.length; i++) children[i].style.display="none";
         document.getElementById(toRevealId).style.display="block";
    }

    document.getElementById('relative').addEventListener('change', function(){
        if (this.value !== '') {
            hideAllChildrenButOne('relative_sections', this.value);
        }else{
            var children = document.getElementById('relative_sections').children;
            for (var i=0; i<children.length; i++) children[i].style.display="none";
        }
    });
</script>

我想做的是让用户能够选择多个选项，如“父亲”和“母亲”，甚至所有选项，然后我验证所有选项，但他必须至少填写一个选项数据

如何做到这一点，以便用户至少选择一个选项，填充此选项的输入，并且仍然可以选择另一个选项，以便我可以验证他选择的内容

---

最重要的是，用户应至少选择一个并填写相关ata，还可以选择多个。

您可以将选择框更改为多个选择框或复选框。如果使用复选框，则将名称设置为name='relative[]

复选框：

<label>father<input type="checkbox" name="relative[]" value="father"></label>
<label>mother<input type="checkbox" name="relative[]" value="mother"></label>
<label>brother<input type="checkbox" name="relative[]" value="brother"></label>

---

您可以将选择框更改为多选或复选框。如果使用复选框，则将名称设置为name='relative[]

复选框：

<label>father<input type="checkbox" name="relative[]" value="father"></label>
<label>mother<input type="checkbox" name="relative[]" value="mother"></label>
<label>brother<input type="checkbox" name="relative[]" value="brother"></label>

---

所以据我所知，您希望用户选择多个选项，并希望验证它们。这是我正在分享的一段代码。您需要在选择标记中使用属性“multiple”来选择多个选项。这是：

在javascript中，您可以这样做，并为选项添加验证

$('#RNA').submit(function(){
     var options = $('#sampleMut > option:selected');
     if(options.length == 0){
         alert('no value selected');
         return false;
     }
});

注意：要选择多个选项，您需要执行=>按command/CTRL+单击选项。

---

希望对你有点帮助

据我所知，您希望用户选择多个选项，并希望验证它们。这是我正在分享的一段代码。您需要在选择标记中使用属性“multiple”来选择多个选项。这是：

在javascript中，您可以这样做，并为选项添加验证

$('#RNA').submit(function(){
     var options = $('#sampleMut > option:selected');
     if(options.length == 0){
         alert('no value selected');
         return false;
     }
});

注意：要选择多个选项，您需要执行=>按command/CTRL+单击选项。

---

希望对你有点帮助

不一定，我想让用户知道，他必须至少填写一份，如果他想填写更多。我需要一些简单的东西，让用户能够理解他应该做什么。这是人们常用的东西。您还可以添加自定义消息以选择至少一个字段。对于移动用户，他们如何选择多个选项？不必是，我想让用户知道，他必须填写至少一个，如果他想填写更多我需要一些简单的东西，用户可以理解他应该做什么这是一个普遍使用的人。您还可以添加自定义消息以选择至少一个字段。移动用户如何选择多个选项？ISEST应为isset。而且我。。。如果。。。在这里你能帮我修一下吗？谢谢@FunkFortyNiner你是选民吗？我看不出这个方法有什么问题与这个方法无关，是你犯的错误。而且我。。。如果。。。在这里你能帮我修一下吗？谢谢@FunkFortyNiner你是选民吗？我看不出这个方法有什么问题。这与方法无关，是你犯的错误。

$('#RNA').submit(function(){
     var options = $('#sampleMut > option:selected');
     if(options.length == 0){
         alert('no value selected');
         return false;
     }
});