模态弹窗中Select控件控制Textarea显示/隐藏的JS代码失效

核心问题分析 #

你的代码存在两个关键问题导致功能在模态弹窗中失效：

1. 重复ID冲突：多个模态弹窗内的select都使用了id="remk"，HTML规范要求id必须唯一，这会导致jQuery只能选中第一个匹配的元素，后续弹窗的select无法触发事件。
2. 静态事件绑定失效：模态弹窗属于动态生成的内容（或初始状态为隐藏），直接使用.change()绑定事件仅对页面加载时已存在的DOM元素生效，动态生成的元素无法触发绑定的事件。

修正方案 #

1. 修复重复ID问题 #

给每个模态框内的select和textarea替换为类名，保证元素标识唯一：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal" id="m<?php echo htmlentities($result->id);echo htmlentities($result->fy);?>">
        <div class="modal-dialog">
            <div class="modal-content">
              <!-- Modal Header -->
              <div class="modal-header">
                <h4 class="modal-title text-center bold"><b>Details of Letter</b></h4>
                </div>
              <!-- Modal body -->
              <div class="modal-body">
               <div class="container-fluid" >
               <form  method="post" action="update.php">
<div class="col-md-6 form-group" style="padding-right:0px;">
  <label for="Language">Remarks By CRDS</label>
  <!-- 替换id为类名remk-select，避免重复ID冲突 -->
  <select class="form-control remk-select" name="Status" required="required">
    <!-- 修正PHP语法错误：$result-Status 改为 $result->Status -->
    <option value="<?php echo htmlentities($result->Status);?>"></option>
    <option value="2"> Accept </option>
    <option value="4"> Return to Originator </option>
  </select>
</div>

<!-- 替换id为类名data-textarea，与当前模态框关联 -->
<div class="col-md-6 data-textarea" style="padding-right:0px;display:none;">
  <label for="remarks">Remarks</label>
  <textarea class="form-control" rows="2" readonly></textarea>
</div>

2. 使用事件委托绑定事件 #

通过事件委托将change事件绑定到静态父级（比如document），确保动态生成的select也能触发事件：

// 事件委托：监听所有.remk-select的change事件
$(document).on('change', '.remk-select', function() {
  const selection = $(this).val();
  // 定位当前select所在模态框内的textarea容器
  const textareaContainer = $(this).closest('.modal').find('.data-textarea');
  
  if (selection === '4') {
    textareaContainer.show();
  } else {
    textareaContainer.hide();
  }
});

额外提示 #

• 检查模态弹窗的初始化逻辑（比如使用Bootstrap模态框时确保正确引入相关JS/CSS），保证弹窗显示时DOM元素已正确加载。
• 原PHP代码中$result-Status存在语法错误，已修正为$result->Status，确保选项值正确输出。

内容的提问来源于stack exchange，提问作者gorakh