模态框职位选择优化：已添加职位需隐藏或禁用

核心逻辑 #

借助Bootstrap模态框的show.bs.modal触发事件，在模态框即将展示时，遍历下拉框选项，对比已添加的职位列表，对匹配项执行禁用或隐藏操作。

具体实现步骤 #

1. 维护已添加职位的数据源

首先需要一个存储已添加职位的数组，实际项目中可从后端接口获取，或从页面已添加的官员列表中提取：

// 示例：已添加的职位，需根据业务逻辑动态更新
const addedPositions = ["Captain", "Secretary"];

2. 绑定模态框显示事件处理逻辑

针对ID为addCourseModal的模态框，绑定显示事件，处理下拉框选项：

方式一：禁用已添加职位（保留选项但不可选）

$('#addCourseModal').on('show.bs.modal', function() {
  const $select = $('select[name="ddl_pos"]');
  // 先恢复所有选项的可用状态，避免重复打开时状态异常
  $select.find('option').prop('disabled', false);
  // 遍历已添加职位，禁用对应选项
  addedPositions.forEach(pos => {
    $select.find(`option[value="${pos}"]`).prop('disabled', true);
  });
});

方式二：隐藏已添加职位（直接移除视觉展示）

$('#addCourseModal').on('show.bs.modal', function() {
  const $select = $('select[name="ddl_pos"]');
  // 先恢复所有选项的显示状态
  $select.find('option').show();
  // 遍历已添加职位，隐藏对应选项
  addedPositions.forEach(pos => {
    $select.find(`option[value="${pos}"]`).hide();
  });
});

3. 补充说明

• 若使用隐藏选项的方式，部分浏览器对hide()支持不佳，可改用CSS类控制：

  .hidden-option {
    display: none !important;
  }
  

  对应JS逻辑替换为：

  // 隐藏时
  $select.find(`option[value="${pos}"]`).addClass('hidden-option');
  // 恢复时
  $select.find('option').removeClass('hidden-option');
  

• 每次打开模态框前必须先恢复所有选项状态，避免重复操作导致的异常。
• 如需获取最新的已添加职位，建议在模态框打开前发起请求同步数据。

完整代码示例（结合你提供的HTML） #

<!-- ========================= MODAL ======================= -->
<div id="addCourseModal" class="modal fade">
  <form class="form-horizontal" method="post" enctype="multipart/form-data">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
          <h4 class="modal-title">Manage officials</h4>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="container-fluid">
              <div class="col-md-6 col-sm-12">
                <div class="form-group">
                  <label>Positions:</label> <span style="color:red;">*</span>
                  <select name="ddl_pos" required="" class="form-control input-sm">
                    <option selected="" disabled="">-- Select Position -- </option>
                    <option value="Captain">Barangay Captain</option>
                    <option value="Kagawad(Ordinance)">Barangay Kagawad(Ordinance)</option>
                    <option value="Kagawad(Public Safety)">Barangay Kagawad(Public Safety)</option>
                    <option value="Kagawad(Tourism)">Barangay Kagawad(Tourism)</option>
                    <option value="Kagawad(Budget & Finance)">Barangay Kagawad(Budget & Finance)</option>
                    <option value="Kagawad(Agriculture)">Barangay Kagawad(Agriculture)</option>
                    <option value="Kagawad(Education)">Barangay Kagawad(Education)</option>
                    <option value="Kagawad(Infrastracture)">Barangay Kagawad(Infrastracture)</option>
                    <option value="SK Chairman">SK Chairman</option>
                    <option value="Secretary">Barangay Secretary</option>
                    <option value="Treasurer">Barangay Treasurer</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
// 已添加的职位列表，实际需根据业务逻辑动态获取
const addedPositions = ["Captain", "Secretary"];

// 模态框显示时处理下拉选项
$('#addCourseModal').on('show.bs.modal', function() {
  const $select = $('select[name="ddl_pos"]');
  // 恢复所有选项的可用状态
  $select.find('option').prop('disabled', false);
  // 禁用已添加的职位
  addedPositions.forEach(pos => {
    $select.find(`option[value="${pos}"]`).prop('disabled', true);
  });
});
</script>

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