Question

我想制作动态表单字段。例如，取决于表单字段的选择，我想显示隐藏字段或隐藏显示块。

例如，如果我选择“高中”的第一个字段，则显示“婚姻状况”字段。默认情况下隐藏此字段。

请参阅示例代码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");
}

Answer 1

试试这个：

<强> JAVASCRIPT

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

如果我正确理解了这个问题，那就是这样。

Answer 2

在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函数通常在定义函数之前呈现。

希望这有帮助！干杯！

多个条件为真后执行

2 个答案: