Jquery 隐藏下拉选择所需的字段验证器

我有下面的代码，所以当访问者选择国内时，会为国内显示一个隐藏的下拉选择。如果访问者选择student，则会出现另一个隐藏的下拉选择。要了解它是如何工作的，您可以 我还使用jquery验证器，所以如果没有选择字段或下拉菜单，它会弹出一个窗口。但是，因为只有一个隐藏字段可以被选择，要么是与学生相关的字段，要么是与家庭相关的字段，所以这个验证器总是弹出窗口。如果没有选择这些隐藏下拉菜单中的任何一个选项，我该怎么做才能使弹出窗口正常工作

我使用的jquery验证程序如下所示：

<script>


function formCheck(formobj){

var x=document.forms["form1"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");

var fieldRequired = Array("reason1",  "reason2");
// Enter field description to appear in the dialog box



var fieldDescription = Array("Reason 1",  "Reason 2");

// dialog message
var alertMsg = "Please complete all fields and enter a valid email address";

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
    var obj = formobj.elements[fieldRequired[i]];
    if (obj){
        switch(obj.type){
        case "select-one":
            if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].value == ""){
                alertMsg += "  " + "\n";
            }
            break;
        case "select-multiple":
            if (obj.selectedIndex == -1){
                alertMsg += "  " + "\n";
            }
            break;

        case "text":
            case "textarea":
            if (obj.value == "" || obj.value == null || atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
                alertMsg += "  " +  "\n";
            }
            break;

        default:
        }
        if (obj.type == undefined){
            var blnchecked = false;
            for (var j = 0; j < obj.length; j++){
                if (obj[j].checked){
                    blnchecked = true;
                }
            }
            if (!blnchecked){
                alertMsg += "  "  + "\n";
            }
        }
    }
}

if (alertMsg.length == l_Msg){
    return true;
}else{
    alert(alertMsg);
    return false;
}


}
// -->
</script>

<script type="text/javascript">

    /* <![CDATA[ */
    $(document).ready(function(){

        $("#storagetype").change(function(){

            if ($(this).val() == "student" ) {

                $("#hidestudent").slideDown("fast"); //Slide Down Effect

            } else {

                $("#hidestudent").slideUp("fast");  //Slide Up Effect

            }
        });


        $("#storagetype").change(function(){

            if ($(this).val() == "domestic" ) {

                $("#hidedomestic").slideDown("fast"); //Slide Down Effect

            } else {

                $("#hidedomestic").slideUp("fast"); //Slide Up Effect

            }
        });
    });

    /* ]]> */

    </script>


    <div class="contactform">
    <div class="forminside">
    <div id="apDiv1">

    <form id="form1" name="form1" method="get" form action="page2.php"  onsubmit="return formCheck(this); "> 

    <div class="detailscolumn1"><h3></h3>
<br/>
<br/>

   <div class="storagetype">
            <div class="input select">
             <div class="labelfortype">
      <label for="storagetype">    select your business type</label>    </div><!--end of labelfortype class-->
                    <select name="storagetype" id="storagetype">
                <option value="">(select)</option>
                <option value="domestic">domestic</option>
                <option value="student">student</option>
                </select>
        </div>
       </div><!--end of storagetype class-->

     <div class="hiddenreason">   
        <div class="hide" id="hidedomestic"><!-- this select box will be hidden at first -->

            <div class="input select">
 <div class="labelforreason"> <label for="reasonstorage">reason for business</label></div><!--end of labelfortype class-->

                <select name="reason2" id="reason1">
                    <option value="">(select)</option>
                    <option value="moving">moving</option>
                    <option value="diy/home improvements">diy/home improvements</option>
                    <option value="decluttering">decluttering</option>
                    <option value="other">other</option>
                </select>
            </div>
        </div>
       </div><!--end of hidden reason--> 

      <div class="hiddenreason">  
       <div class="hide" id="hidestudent"><!-- this select box will be hidden at first -->
            <div class="input select">
  <div class="labelforreason"> <label for="reasonstorage">reason for business</label></div><!--end of labelfortype class-->

                <select name="reason3" id="reason2">
                    <option value="">(select)</option>
                    <option value="holiday">holiday</option>
                    <option value="moving">moving</option>
                    <option value="other">other</option>

                </select>
            </div>
        </div>
     </div><!--end of hidden reason-->    






    </div><!--end of detailscolumn1-->



    </form></div>

    </div><!--end of forminside-->
    </div><!--end of contactform-->

html部分的代码如下所示：

<script>


function formCheck(formobj){

var x=document.forms["form1"]["email"].value;
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");

var fieldRequired = Array("reason1",  "reason2");
// Enter field description to appear in the dialog box



var fieldDescription = Array("Reason 1",  "Reason 2");

// dialog message
var alertMsg = "Please complete all fields and enter a valid email address";

var l_Msg = alertMsg.length;

for (var i = 0; i < fieldRequired.length; i++){
    var obj = formobj.elements[fieldRequired[i]];
    if (obj){
        switch(obj.type){
        case "select-one":
            if (obj.selectedIndex == -1 || obj.options[obj.selectedIndex].value == ""){
                alertMsg += "  " + "\n";
            }
            break;
        case "select-multiple":
            if (obj.selectedIndex == -1){
                alertMsg += "  " + "\n";
            }
            break;

        case "text":
            case "textarea":
            if (obj.value == "" || obj.value == null || atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length){
                alertMsg += "  " +  "\n";
            }
            break;

        default:
        }
        if (obj.type == undefined){
            var blnchecked = false;
            for (var j = 0; j < obj.length; j++){
                if (obj[j].checked){
                    blnchecked = true;
                }
            }
            if (!blnchecked){
                alertMsg += "  "  + "\n";
            }
        }
    }
}

if (alertMsg.length == l_Msg){
    return true;
}else{
    alert(alertMsg);
    return false;
}


}
// -->
</script>

<script type="text/javascript">

    /* <![CDATA[ */
    $(document).ready(function(){

        $("#storagetype").change(function(){

            if ($(this).val() == "student" ) {

                $("#hidestudent").slideDown("fast"); //Slide Down Effect

            } else {

                $("#hidestudent").slideUp("fast");  //Slide Up Effect

            }
        });


        $("#storagetype").change(function(){

            if ($(this).val() == "domestic" ) {

                $("#hidedomestic").slideDown("fast"); //Slide Down Effect

            } else {

                $("#hidedomestic").slideUp("fast"); //Slide Up Effect

            }
        });
    });

    /* ]]> */

    </script>


    <div class="contactform">
    <div class="forminside">
    <div id="apDiv1">

    <form id="form1" name="form1" method="get" form action="page2.php"  onsubmit="return formCheck(this); "> 

    <div class="detailscolumn1"><h3></h3>
<br/>
<br/>

   <div class="storagetype">
            <div class="input select">
             <div class="labelfortype">
      <label for="storagetype">    select your business type</label>    </div><!--end of labelfortype class-->
                    <select name="storagetype" id="storagetype">
                <option value="">(select)</option>
                <option value="domestic">domestic</option>
                <option value="student">student</option>
                </select>
        </div>
       </div><!--end of storagetype class-->

     <div class="hiddenreason">   
        <div class="hide" id="hidedomestic"><!-- this select box will be hidden at first -->

            <div class="input select">
 <div class="labelforreason"> <label for="reasonstorage">reason for business</label></div><!--end of labelfortype class-->

                <select name="reason2" id="reason1">
                    <option value="">(select)</option>
                    <option value="moving">moving</option>
                    <option value="diy/home improvements">diy/home improvements</option>
                    <option value="decluttering">decluttering</option>
                    <option value="other">other</option>
                </select>
            </div>
        </div>
       </div><!--end of hidden reason--> 

      <div class="hiddenreason">  
       <div class="hide" id="hidestudent"><!-- this select box will be hidden at first -->
            <div class="input select">
  <div class="labelforreason"> <label for="reasonstorage">reason for business</label></div><!--end of labelfortype class-->

                <select name="reason3" id="reason2">
                    <option value="">(select)</option>
                    <option value="holiday">holiday</option>
                    <option value="moving">moving</option>
                    <option value="other">other</option>

                </select>
            </div>
        </div>
     </div><!--end of hidden reason-->    






    </div><!--end of detailscolumn1-->



    </form></div>

    </div><!--end of forminside-->
    </div><!--end of contactform-->

---

非常感谢您提前

我建议您禁用如下隐藏的选择：

$("#storagetype").change(function(){
    if ($(this).val() == "student" ) {
        $("#hidestudent").slideDown("fast"); //Slide Down Effect
        $("#reason2").prop('disabled', false);
    } else {
        $("#hidestudent").slideUp("fast");  //Slide Up Effect
        $("#reason2").prop('disabled', true);
    }
});

对另一个应用相同的方法

…然后检查输入的禁用状态当您诚实地进行验证时，我无法从您的js代码中看出您在哪里进行验证，因此我在这里给出一个通用示例：

if ($('#test').prop('disabled') == true) {
    // do stuff if true
} else {
    // do stuff if false
}

编辑：你的js代码一定有内在的问题，很抱歉，我无法弄清楚到底是什么问题，但当我测试它时，它总是返回错误消息，即使我删除了隐藏div的行并允许它们显示，然后选择了所有的值

此外，在你的js代码中没有指定和检查的电子邮件字段-我添加了它，也没有添加提交按钮

---

请参阅此处的测试：

尝试将0添加为值如果未选中，则更容易对其进行检查，然后确保禁用隐藏的select元素，最后仅在未禁用的情况下检查值…@webeno感谢您的评论。值0已存在。我遇到的问题与上面的验证器有关。它希望选择两个隐藏的下拉选择。但只能选择其中一个，无论是与家庭有关的还是与学生有关的。您在那里挂断了0。。。看看我写的第二部分；感谢@webeno，这很有意义。我如何在选择隐藏时禁用它，并仅在未禁用时检查值？我仍在学习这门课程，因此非常感谢您的帮助。我提供了一个答案。。。我以前不想这么做的原因是，我没有在js函数中看到您在哪里根据select的实际值进行验证。。。我仍然不知道，所以我添加了一个通用的回应。。。希望它能帮助。。。