本文介绍在不修改后端模板的前提下，通过原生 javascript 动态替换表单中单选按钮的值与显示文本，并移除指定选项，适用于 elementor 等可视化建站工具中嵌入的 html 片段。
本文介绍在不修改后端模板的前提下，通过原生 javascript 动态替换表单中单选按钮的值与显示文本，并移除指定选项，适用于 elementor 等可视化建站工具中嵌入的 html 片段。
在实际网页开发中，尤其是使用 Elementor 等拖拽式建站工具时，常遇到「HTML 已渲染但无法直接编辑源模板」的情况。例如本例中的手机维修预约表单：客户勾选“自行送修”（value="bring-your-own"）后，才动态显示门店选择区域（.ic-select-store），此时需将原有两个门店选项（Zutphen、Winterswijk）改为仅保留一个并更新为 Barneveld，同时彻底移除第二个选项。
由于该区域是条件性加载的，不能仅靠静态 HTML 替换——若直接修改页面源码，可能因 JS 动态渲染被覆盖；而通过浏览器开发者工具临时修改又不具备持久性。正确做法是：监听触发条件（复选框/单选框状态变化），待目标 DOM 节点就绪后，执行精准 DOM 操作。
以下是经过验证、可直接部署的解决方案（兼容现代浏览器，无需 jQuery）：
<script>
document.addEventListener('DOMContentLoaded', function() {
// 监听“自行送修”选项（注意：实际 ID 可能为 item-3，但更健壮的方式是按 value 定位）
const deliveryRadio = document.querySelector("input[name='delivery'][value='bring-your-own']");
if (!deliveryRadio) return; // 若元素不存在则提前退出
deliveryRadio.addEventListener('change', function() {
if (this.checked) {
// 确保 .ic-select-store 已渲染（加简单防错）
setTimeout(() => {
const storeContainer = document.querySelector('.ic-select-store');
if (!storeContainer) return;
const storeItems = storeContainer.querySelectorAll('.ic-single-store');
// 移除第二个门店项（索引为 1）
if (storeItems.length > 1) {
storeItems[1].remove();
}
// 更新第一个门店的 input value 和 label 文本
const firstInput = document.getElementById('first_store');
const firstLabel = document.querySelector('label[for="first_store"]');
if (firstInput && firstLabel) {
firstInput.value = 'Barneveld';
// 注意：原 HTML 中 label 内含嵌套 <font> 标签，需定位到最内层文本节点
// 更鲁棒写法：清空 label 并重设纯文本（避免残留标签）
firstLabel.innerHTML = 'Barneveld';
}
}, 100); // 微延迟确保 DOM 渲染完成（可根据需要调整）
}
});
});
</script>
✅ 关键要点说明：
- 使用 DOMContentLoaded 确保脚本在 DOM 加载完成后执行；
- 用 querySelector 按 name + value 组合精确定位目标 radio，比依赖 ID 更可靠；
- setTimeout 是必要的容错机制——因为 .ic-select-store 区域通常由 JS 异步显示，需等待其挂载到 DOM 后再操作；
- label.innerHTML = 'Barneveld' 替代 innerText，可安全清除原有 嵌套结构，避免文本不显示问题；
- 移除操作使用 .remove()（现代标准 API），无需 parentNode.removeChild；
⚠️ 注意事项：
- 请将上述 <script> 标签粘贴至 Elementor 的「HTML 小工具」或主题页脚（如 wp_footer 钩子处），确保全局可用； </script>
- 若网站启用缓存，请清除浏览器及服务器缓存以验证效果；
- 若未来 HTML 结构变更（如 class 名调整），需同步更新脚本中的选择器；
- 生产环境建议将脚本外链并添加版本号，便于维护与调试。
通过此方案，您无需触碰 PHP 模板或后台逻辑，即可实现灵活、可维护的前端动态配置，特别适合第三方交付项目中的快速定制需求。
