多條件成立後執行

我想製作動態表單字段。比如，取決於表單域的選擇，我想顯示隱藏域或隱藏顯示塊。多條件成立後執行

例如，如果我選擇'高中'的第一個字段，然後顯示'婚姻狀況'字段。該字段默認爲隱藏。

參見示例代碼here

太感謝你了！

這裏是HTML

<!-- fieldsets --> 
    <fieldset> 
     <h2 class="fs-title">Check your eligibility</h2> 
     <h3 class="fs-subtitle">About yourself</h3> 
     <label for="educationLevel" tabindex="1">Education:<select name="educationLevel" class="pie" id="educationLevel" onchange="myfunction();"> 
      <option value="0">Select an option</option> 
      <option value="1">High School</option> 
      <option value="2">College</option> 
      <option value="3">Grad School</option> 
     </select></label> 

     <label for="quiz-applicantCountry" tabindex="1" id="yourself">YOUR COUNTRY OF BIRTH:<select name="applicantCountry" id="your-applicantCountry" class="pie" onchange="myfunction();"> 
      <option value="0">Select a Country</option> 
      <option value="54">Afghanistan</option> 
      <option value="93">Albania</option> 
      ... 
      <option value="52">Zambia</option> 
      <option value="53">Zimbabwe</option> 
     </select></label> 
     <label for="maritalStatus" tabindex="2" id="marital">Marital Status:<select name="maritalStatus" class="pie" id="maritalStatus" onchange="myfunction();"> 
      <option value="0">select</option> 
      <option value="1">YES</option> 
      <option value="2">NO</option> 
     </select></label> 
     <label for="quiz-applicantCountry" tabindex="1" id="spouse">YOUR SPOUSE COUNTRY OF BIRTH:<select name="applicantCountry" id="spouse-applicantCountry" class="pie" onchange="myfunction();"> 
      <option value="0">Select a Country</option> 
      <option value="54">Afghanistan</option> 
      ... 
      <option value="52">Zambia</option> 
      <option value="53">Zimbabwe</option> 
     </select></label> 


     <input type="button" name="next" class="next action-button" value="Next" /> 
    </fieldset> 

</form>

下面是使用Javascript

function myfunction(){ 
    var birthSelectedCountry = $("select#your-applicantCountry option:selected").val(); 
    // console.log(birthSelectedCountry); 
    var country = "-" + birthSelectedCountry + "-"; 
    var eligibleCountries = "-61-65-81-86-82-91-266-223-95-102-175-104-106-112-120-140-146-156-163-221-190-177-181-183-187-261-262-189-194-56-182-38-279-287-267-115-123-280-288-286-137-281-289-282-283-149-270-284-285-1000-"; 

    var birthSpouseSelectedCountry = $("select#your-applicantCountry option:selected").val(); 
    // console.log(birthSpouseSelectedCountry); 
    var spouseCountry = "-" + birthSpouseSelectedCountry + "-"; 
    var eligibleSpouseCountries = "-61-65-81-86-82-91-266-223-95-102-175-104-106-112-120-140-146-156-163-221-190-177-181-183-187-261-262-189-194-56-182-38-279-287-267-115-123-280-288-286-137-281-289-282-283-149-270-284-285-1000-"; 
    var maritalStatus = $("select#maritalStatus option:selected").val(); 
    // console.log(maritalStatus); 
    var marital = "-" + maritalStatus + "-"; 
    var eligibleMarital = "-1-2-"; 
    var educationLevel = $("#educationLevel option:selected").val(); 
    var education = "-" + educationLevel + "-"; 
    var eligibleEducationLevel = "-2-3-"; 

console.log(education); 
console.log(marital); 
console.log(country); 
console.log(eligibleEducationLevel.indexOf(education)); 
console.log(eligibleMarital.indexOf(marital)); 
console.log(eligibleCountries.indexOf(country)); 

if(eligibleEducationLevel.indexOf(education) < 0 && eligibleCountries.indexOf(country) < 0) { 
    console.log("Are you married?"); 
    // $('#marital').fadeIn(); 
    $('#marital').css('display', "block"); 
}

來源

2016-07-21 Yeondam Park

試試這個：

JAVASCRIPT

if ($("#educationLevel").val() == "1"){ 
    $("#maritalStatus").show(); 
} else { 
    // Do something else.. 
}

這是如果我正確理解問題。

來源

2016-07-21 06:35:27 ThatAwesomeCoder

在您的document.ready（）事件中，通過引用它們的id來隱藏所有控件。 document.ready（）函數用於初始化整個頁面的整個行爲。

$(document.ready(function(){ 

     //hide the maritalStatus dropdown initially at pageload. 
     $('#maritalStatus').hide(); 
     $('#spouse-applicantCountry').hide(); 
     $('#maritalStatus').val(0); 
     $('#spouse-applicantCountry').val(0); 

     //This the onchange event of the select 
     $('#educationLevel').on('change', function() { 
      $('#maritalStatus').show(); 

      //Put your conditions here 
      if($('#maritalStatus').val() == "1"){ 
      $('#spouse-applicantCountry').show(); 
      } 
     }); 
}));

下拉onChange函數將無法正常工作，因爲select控件通常在函數定義之前呈現。

希望這會有所幫助！乾杯！

來源

2016-07-21 07:09:01

多條件成立後執行

回答

相關問題