触发自动选择下拉列表以显示其他隐藏字段

Question

嗨，我的表格中有下拉选择是和否。 当有人选择"是"时，

它会显示 3-4 个字段，当选择"否"时，它会隐藏其他字段。在我的表单中，当我们将用户带到包含从输入字段中的数据库中获取填充数据的页面时，也有修改选项。

现在的问题是，当某人被选中"是"并提交了其他必填字段时。 现在想修改数据，当此页面打开时，我可以看到自动选择了yes选项，但是隐藏字段没有显示，我们需要单击否，然后单击是，然后它显示其他填充字段。 我希望当选择选项为"是"时它应该自动打开。

<select name="tab" size="1" class="combo2" id="chkYes" required>
                                    <option value="">Select One</option>
                                    <option value="Yes" <?php if($oth_passport == 'Yes'){ echo "selected";}?>>Yes</option>
                                    <option value="No" <?php if($oth_passport == 'No'){ echo "selected";}?>>No</option>
                                </select>

其他领域是——

<tr id="issuc" style="display:none;">
<td>
<input name="oth_ppt" value="<?php echo $othppt;?>" required >
</td></tr>
<tr id="ppno1" style="display:none;">
<td>
<input name="oth_ntl" value="<?php echo $othntl;?>" required >
</td>
</tr>

控制这一点的Javascript代码是 -

    <script>
$(document).ready(function(){
    $('#chkYes').on('change', function() {
    if ( this.value == 'Yes') {
      $("#issuc , #ppno1").show();
      $("#issuc input, #ppno1 input").prop("required", true);
    } else {
      $("#issuc , #ppno1").hide();
      $("#issuc input, #ppno1 input").prop("required", false);
    }
  });
});
</script>

Answer 1

只需一行更新代码，即可在加载时加载或隐藏相关内容：

<script>
$(document).ready(function(){
    $('#chkYes').on('change', function() {
        if ( this.value == 'Yes') {
            $("#issuc , #ppno1").show();
            $("#issuc input, #ppno1 input").prop("required", true);
        } else {
            $("#issuc , #ppno1").hide();
            $("#issuc input, #ppno1 input").prop("required", false);
        }
    }).trigger('change'); //HERE is the trick!!
});
</script>

Answer 2

解决它的一种方法是手动触发change事件，如下所示：

$('#chkYes').trigger("change");

以下是更新的代码：

$(document).ready(function() {
  $('#chkYes').on('change', function() {
    if (this.value == 'Yes') {
      $("#issuc , #ppno1").show();
      $("#issuc input, #ppno1 input").prop("required", true);
    } else {
      $("#issuc , #ppno1").hide();
      $("#issuc input, #ppno1 input").prop("required", false);
    }
  }).trigger("change");
});