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
}

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

如何执行此操作，以便用户至少选择一个选项，填充该选项的输入，并且仍然可以选择另一个选项，以便我可以验证他选择的内容？

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

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>

MultiSelect

<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

据我所知，您希望用户选择多个选项，并希望对其进行验证。这是我共享的代码。您需要在select标记中使用属性'multiple'来选择多个选项。这里是： 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;
     }
});

注意：要选择多个选项，您需要做=>按Command / CTRL +单击选项。希望能有所帮助！

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

2 个答案: