Javascript 是否显示每个选定下拉列表的输入标记并进行验证？

这是我的下拉列表和输入字段的代码

   <div>
        <select id="scl">
                <option value="10">Ten</option>
                <option value="7">Seven</option>
                <option value="4">Four</option>
         </select>
    </div>

<form>
    <div class="10 box" ><input type="number"  required></div>
    <div class="7 box" hidden><input type="numbe" required></div>
    <div class="4 box" hidden><input type="number" required></div>
      <input type="submit" >
 </form>

十
七
四

这是我的jquery代码

<script>
$(document).ready(function(){
    $("#scl").change(function(){
        $(this).find("option:selected").each(function(){
            var optionValue = $(this).attr("value");
            if(optionValue){
                $(".box").not("." + optionValue).hide();
                $("." + optionValue).show();
            } else{
                $(".box").hide();
            }
        });
    }).change();
});
</script>

$（文档）.ready（函数（）{
$（“#scl”）.更改（函数（）{
$（this）.find（“选项：选中”）.each（函数（）{
var optionValue=$（此）.attr（“值”）；
如果（选项值）{
$（“.box”）.not（“.”+optionValue.hide（）；
$（“+optionValue）.show（）；
}否则{
$（“.box”）.hide（）；
}
});
}).change（）；
});

它没有提交我的表格

它显示并隐藏特定下拉列表的输入字段（即，如果选择选项10，则显示输入字段10），但我的问题是如何从其余两个字段中删除验证，以便提交表单

我只需要对所选字段进行验证。

感谢您的帮助。

请不要在此处添加“必需”——

您可以在该$（“+”optionValue）.show（）之后的输入字段中添加“required”

使用此行将所需道具添加到此字段： $（“+optionValue）.prop（'required'，true）

并随后将其他设置为false