从下拉菜单中选择购买选项时，两个文本框需要获取设置的值

Question

我有两个文本框括在中。从上面的下拉列表中选择“购买”选项时，这两个框被隐藏。由于我正在使用这两个框的必填项，因此在选择“购买”选项时未通过验证步骤。问题：如何从下拉列表中选择“购买”选项，设置两个文本框的值，即PropertyValue和ExistingLoanBalance？

<select id="selectPR" name="selectPR" required>
        <option value="">--Select--</option>
        <option value="Purchase" id="Purchase">Purchase</option>
        <option value="Refinance" id="Refinance">Refinance</option>
    </select>
    <div class="PR">
    <label for="PropertyValue" id="PropertyValue" >Existing Property Value*</label>
    <input type="text" id="ExistingLoanBalance" name="PropertyValue" class="PropertyValue" required/>
    <label for="ExistingLoanBalance" id="ExistingLoanBalance">Existing Loan Balance*</label>
    <input type="text" id="ExistingLoanBalance" class="ExistingLoanBalance" name="ExistingLoanBalance" required/>
    </div>

Answer 1

您可以通过以下jquery来处理文本框的隐藏条件

Jquery

<script>
if($("#ExistingLoanBalance").css("display", "block")){
   $("#ExistingLoanBalance").prop("required");
}
</script>

NOTE：并且在输入标签中不要提及必需的内容。jQuery将完成其工作。

Answer 2

首先，两个输入字段都具有相同的“ id”及其标签，它们的ID应该不同

选择了“购买”选项时，您不想设置两个文本字段的值，但是，您不想使用必需的属性来验证它们。总之，应根据下拉菜单中的选择切换所需属性。

您可以使用选择框的onchange事件来完成

<select id="selectPR" name="selectPR" required>
        <option value="">--Select--</option>
        <option value="Purchase" id="Purchase">Purchase</option>
        <option value="Refinance" id="Refinance">Refinance</option>
    </select>
    <div class="PR">
    <label for="PropertyValue" id="lblPropertyValue" >Existing Property Value*</label>
    <input type="text" id="PropertyValue" name="PropertyValue" class="PropertyValue" required/>
    <label for="ExistingLoanBalance" id="lblExistingLoanBalance">Existing Loan Balance*</label>
    <input type="text" id="ExistingLoanBalance" class="ExistingLoanBalance" name="ExistingLoanBalance" required/>
    </div>

<script type="text/javascript">
  $('#selectPR').on('change', function() {
    if( this.value == 'Purchase'){
       $('#PropertyValue').removeAttr('required');
       $('#ExistingLoanBalance').removeAttr('required');
    }
    else {
       $('#PropertyValue').attr('required', 'required');
       $('#ExistingLoanBalance').attr('required', 'required');
    }
  });
</script>