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

Question

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

现在的问题是，当某人被选择为yes，并且还提交了其他必填字段时。现在要修改数据，当此页面打开时，我可以看到自动选择了yes选项，但隐藏的字段没有显示，我们需要单击No，然后单击yes，然后显示其他填充的字段。我希望当选择的选项是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");
});