如何让用户能够添加另一个选择数据？

Question

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

这里是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>

隐藏所有部分的 CSS 代码：

#mother, 
#father, 
#brother{
    display:none;
}

显示/隐藏更改所选选项部分的 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>

这是一个现场小提琴，看看发生了什么：http://jsfiddle.net/38db59cx

然后我根据所选值验证输入：

if($_POST['relative'] == 'father'){
    //Validate the inputs
}elseif($_POST['relative'] == 'mother'){
    //Validate the inputs
}elseif($_POST['relative'] == 'brother'){
    //Validate the inputs
}

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

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

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

Answer 1

您可以将选择框更改为多选或复选框。如果使用复选框，您可以将名称设置为 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>

多选

<select name="relative" multiple>

然后在php中你可以像这样读取数据：

// create a container to hold the validated results
$aRelative = array();

// if post data exists proceed to check the resutls
if(isset($_POST['relative'])){
    // loop over each post value
    foreach($_POST['relative'] as $iPos => $a){
        // do some validation on the result 
        if($a != ""){
            $aRelative[] &= $a;
        }
    }
}
if(!empty($aRelative)){
    //do whatever with the data
}

Answer 2

所以据我了解，您希望用户选择多个选项并希望验证它们。所以这是我要分享的一段代码。您需要在选择标签中使用属性“多个”来选择多个选项。这里是： Click here and check the code, you want to do something similar

在 javascript 中，您可以执行此操作并为选项添加验证。

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

注意：要选择多个选项，您需要执行 => 按命令/CTRL + 单击选项。 希望对您有所帮助！