Dynamics 365：如何在弹窗中添加选项集字段并同步值至主表单

1. 构建弹窗与主表单的基础结构 #

先在页面中写出主表单和带选项集的弹窗HTML结构，这里以单选选项集为例（多选或下拉框逻辑类似）：

<!-- 主表单 -->
<form id="mainForm">
  <!-- 主表单中接收弹窗值的字段，可根据需求改为可见输入框 -->
  <input type="hidden" id="targetField" name="targetOption">
  <!-- 其他表单内容 -->
  <button type="button" id="openModalBtn">继续操作</button>
</form>

<!-- 弹窗容器 -->
<div id="optionModal" class="modal">
  <div class="modal-inner">
    <h3>请选择必填选项</h3>
    <!-- 单选选项集 -->
    <div class="options">
      <label><input type="radio" name="modalOption" value="opt1"> 选项一</label>
      <label><input type="radio" name="modalOption" value="opt2"> 选项二</label>
      <label><input type="radio" name="modalOption" value="opt3"> 选项三</label>
    </div>
    <div class="modal-btns">
      <button type="button" id="confirmModal">确认</button>
      <button type="button" id="closeModal">取消</button>
    </div>
  </div>
</div>

2. 弹窗基础样式 #

添加CSS让弹窗正常显示：

/* 弹窗遮罩层 */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
}

/* 弹窗内容区 */
.modal-inner {
  background-color: white;
  width: 80%;
  max-width: 400px;
  margin: 15% auto;
  padding: 20px;
  border-radius: 4px;
}

.options {
  margin: 15px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.modal-btns {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

3. 实现值同步与弹窗控制逻辑 #

用JavaScript监听交互事件，将弹窗选中的选项值同步到主表单，并控制弹窗显示隐藏：

// 获取页面元素
const modal = document.getElementById('optionModal');
const openBtn = document.getElementById('openModalBtn');
const confirmBtn = document.getElementById('confirmModal');
const closeBtn = document.getElementById('closeModal');
const targetField = document.getElementById('targetField');
const modalOptions = document.querySelectorAll('input[name="modalOption"]');

// 打开弹窗
openBtn.addEventListener('click', () => {
  modal.style.display = 'block';
});

// 关闭弹窗
function closeModalFunc() {
  modal.style.display = 'none';
}
closeBtn.addEventListener('click', closeModalFunc);
// 点击遮罩层关闭弹窗
window.addEventListener('click', (e) => {
  if (e.target === modal) closeModalFunc();
});

// 确认按钮：同步值并关闭弹窗
confirmBtn.addEventListener('click', () => {
  let selectedVal = '';
  // 遍历选项找选中值
  modalOptions.forEach(opt => {
    if (opt.checked) selectedVal = opt.value;
  });
  
  if (selectedVal) {
    // 将选中值赋值给主表单字段
    targetField.value = selectedVal;
    closeModalFunc();
    // 可在此添加后续操作，比如提交主表单
    // document.getElementById('mainForm').submit();
  } else {
    alert('请选择一个选项');
  }
});

// 可选：实时同步（用户选中选项时立刻同步到主表单）
modalOptions.forEach(opt => {
  opt.addEventListener('change', () => {
    if (opt.checked) targetField.value = opt.value;
  });
});

扩展说明 #

• 如果需要多选选项集，把radio改成checkbox，同步时将选中值拼成数组或逗号分隔的字符串存入主表单字段即可。
• 若使用Vue、React等框架，可通过绑定数据的方式更简洁实现同步，比如弹窗的选项值绑定到组件的data属性，主表单字段也绑定同一个属性，天然实现同步。
• 也可以用第三方UI组件库（如Bootstrap Modal、Element UI Dialog）快速构建弹窗，减少自定义样式和基础逻辑的编写。

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