Question

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

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

<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");
});

触发选择下拉菜单自动显示其他隐藏字段

2 个答案: