jquery验证：在选择特定选项时创建一个字段。

Question

感谢您的帮助。我确信有一个简单的方法来做到这一点，但我无法弄清楚。基本上我需要jquery按照jquery规则的要求设置特定的选择标记，如果选择了另一个具有特定值的选项。

<form action="here" method="post" id="application"> 

<span class="label">Would you be able to pass a criminal background check?</span> 
    <select name="backgroundCheck" id="backgroundCheck"> 
    <option value="">Please select</option> 
    <option id="backgroundYes" value="Yes">Yes</option> 
    <option id="backgroundNo" value="No">No</option> 
    </select> 

(If one selects 'Yes', then this felonies div pops up) 

<div id="felonies" style="display: none;"> 
     <span class="label">Any past felonies on your record?</span><br /> 
     <select name="backgroundFelonies" id="backgroundFelonies"> 
     <option value="">Please select</option> 
     <option value="Yes">Yes</option> 
     <option value="No">No</option> 
     </select> 
</div> 
.... 

基本上，如果用户不能通过犯罪背景检查，他们被问及他们是否有任何重罪。始终要求用户回答犯罪背景检查问题。如果他们对这个问题回答“否”，那么重罪问题就会出现，那时我需要在jquery中需要选择Felonies标签。另外，如果用户能够通过犯罪背景检查，我不需要重罪。我可以在JavaScript中做到这一点，但我一直无法在jQuery中做到这一点。

下面你会看到代码的注释行我需要激活时

<select name="backgroundCheck" id="backgroundCheck"> is 'yes' 




$(document).ready(function(){ 

    jQuery.validator.messages.required = "Please complete the required fields."; 

    $("#application").validate({ 
     errorLabelContainer: "#error-note", 
     rules: { 
      firstName: "required", 
      lastName: "required", 
      phone: "required", 
      email: "required", 
      address1: "required", 
      city: "required", 
      zip: "required", 
      experience: "required", 
      yearsExperience: "required", 
      transportation: "required", 
      legalToWork: "required", 

      backgroundCheck: "required", 
     //backgroundFelonies: "require",  <------------------ This one 
      speakEnglish: "required" 

     }, 

     groups: { 
     collecive: "firstName lastName email address1 city zip phone experience yearsExperience transportation legalToWork speakEnglish backgroundCheck" 
     } 
    }); 
    }); 

值，这可能是很容易做到的，但我知道我在看这个错误的方式。我对jquery很陌生，我尝试过的所有传统方法都失败了。

感谢

Answer 1

可以使用，这将返回true函数/假

jQuery(function($) { 
 

 
    jQuery.validator.messages.required = "Please complete the required fields."; 
 

 
    $("#application").validate({ 
 
    errorLabelContainer: "#error-note", 
 
    rules: { 
 
     firstName: "required", 
 
     lastName: "required", 
 
     phone: "required", 
 
     email: "required", 
 
     address1: "required", 
 
     city: "required", 
 
     zip: "required", 
 
     experience: "required", 
 
     yearsExperience: "required", 
 
     transportation: "required", 
 
     legalToWork: "required", 
 

 
     backgroundCheck: "required", 
 
     backgroundFelonies: { 
 
     required: function() { 
 
      return $('#backgroundCheck').val() == 'Yes'; 
 
     } 
 
     }, //  <------------------ This one 
 
     speakEnglish: "required" 
 

 
    }, 
 

 
    groups: { 
 
     collecive: "firstName lastName email address1 city zip phone experience yearsExperience transportation legalToWork speakEnglish backgroundCheck" 
 
    } 
 
    }); 
 
});

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.1.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/jquery.validate.js"></script> 
 
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.12.0/additional-methods.js"></script> 
 

 
<form id="application" method="post" action=""> 
 
    <div> 
 
    <span class="label">Would you be able to pass a criminal background check?</span> 
 
    <select name="backgroundCheck" id="backgroundCheck"> 
 
     <option value="">Please select</option> 
 
     <option id="backgroundYes" value="Yes">Yes</option> 
 
     <option id="backgroundNo" value="No">No</option> 
 
    </select> 
 
    </div> 
 

 
    <div id="felonies"> 
 
    <span class="label">Any past felonies on your record?</span> 
 
    <br /> 
 
    <select name="backgroundFelonies" id="backgroundFelonies"> 
 
     <option value="">Please select</option> 
 
     <option value="Yes">Yes</option> 
 
     <option value="No">No</option> 
 
    </select> 
 
    </div> 
 
    <input type="submit" class="button" value="Submit" /> 
 
</form>