如何修改HTML中的门店单选按钮选项：替换名称并删除选项

我维护着一个第三方开发的手机维修店网站，用户需先选择设备、维修类型，确定到店日期和时间后选择门店。当前门店单选选项为：

• 选项1：Zutphen
• 选项2：Winterswijk

需求：

1. 将选项1替换为Barneveld
2. 删除选项2

我已通过浏览器审查元素找到对应HTML代码，尝试用Elementor的HTML部件修改，请问该如何实现？

对应的表单HTML代码片段：

<div class="ic-select-store">
    <h3>Welke winkel wil je bezoeken?</h3>
    <div>
        <div class="ic-single-store">
            <input type="radio" id="first_store" name="selected_store" value="Zutphen">
            <label for="first_store">Zutphen</label>
        </div>
        <div class="ic-single-store">
            <input type="radio" id="second_store" name="selected_store" value="Winterswijk">
            <label for="second_store">Winterswijk</label>
        </div>
    </div>
    <p id="error_selected_store"></p>
</div>

由于是第三方开发的表单，直接修改原始代码可能受限，通过Elementor的HTML部件注入JavaScript是可行方案，步骤如下：

1. 打开Elementor编辑器，找到表单所在页面，添加一个HTML部件（可放在页面任意位置，建议放在表单附近或页脚区域）
2. 将以下JavaScript代码粘贴到HTML部件的内容输入框中：

<script>
document.addEventListener('DOMContentLoaded', function() {
    // 修改第一个门店的选项值和显示文本
    const firstStoreInput = document.getElementById('first_store');
    const firstStoreLabel = document.querySelector('label[for="first_store"]');
    
    if (firstStoreInput) firstStoreInput.value = 'Barneveld';
    if (firstStoreLabel) firstStoreLabel.textContent = 'Barneveld';
    
    // 删除第二个门店的选项容器
    const secondStore = document.querySelector('.ic-single-store:nth-child(2)');
    if (secondStore) secondStore.remove();
});
</script>

3. 保存并发布页面，刷新后即可看到修改效果

额外说明 #

• 代码会在页面完全加载后执行，确保能定位到表单元素
• 若后续表单的类名、ID发生变化，需对应调整代码中的选择器
• 也可将这段代码放在Elementor的自定义JS面板中，效果一致

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