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

【问题标题】：trigger select dropdown automatically to show other hidden fields自动触发选择下拉菜单以显示其他隐藏字段
【发布时间】：2018-02-04 05:31:47
【问题描述】：

嗨，我的表单中有下拉选择是和否。当有人选择是时，它会显示 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>

【问题讨论】：

标签： javascript forms

【解决方案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>

【讨论】：

它就像魅力一样！谢谢礼萨妈妈。简单干净的一个。

【解决方案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");
});

【讨论】：