如何根据选中的Depth Interval复选框动态生成Depth下拉选项？

希望Depth区域的下拉选项能根据用户选中的Depth Interval复选框动态变化。例如，当用户选中1.0m的Depth Interval时，Depth的下拉框应显示1.0、1.1、1.2、1.3、1.4这些选项。以下是当前代码：

<label>
    Depth Interval:
</label>
<br>
<input type="checkbox" id="depth_interval1.0" name="depth_interval" onclick="onlyOne(this)" value="1.0m" />
    <label for="depth_interval1.0"> 1.0m</label>
<input type="checkbox" id="depth_interval1.5" name="depth_interval" onclick="onlyOne(this)" value="1.5m" />
    <label for="depth_interval1.5"> 1.5m</label>
<input type="checkbox" id="depth_interval3.0" name="depth_interval" onclick="onlyOne(this)" value="3.0m" />
    <label for="depth_interval3.0"> 3.0m</label>
<input type="checkbox" id="depth_interval_cont" name="depth_interval" onclick="onlyOne(this)" value="continuos" />
<label for="depth_interval_cont"> Continuos</label><br><br>

<script>
    function onlyOne(checkbox) {
        var checkboxes = document.getElementsByName('depth_interval')
        checkboxes.forEach((item) => {
            if (item !== checkbox) item.checked = false
        })
    }
</script>


<label>
    Depth:
</label>
<br>
<select name="depth_from" id="depth_from">
    <option value="...">...</option>
    <option value="1.0">1.0</option>
    <option value="1.1">1.1</option>
    <option value="1.2">1.2</option>
    <option value="1.3">1.3</option>
    <option value="1.4">1.4</option>
    <option value="...">...</option>
</select>

to

<select name="depth_to" id="depth_to">
    <option value="...">...</option>
    <option value="1.0">1.0</option>
    <option value="1.1">1.1</option>
    <option value="1.2">1.2</option>
    <option value="1.3">1.3</option>
    <option value="1.4">1.4</option>
    <option value="...">...</option>
</select>

<script>
    var depth[] = 1.0,1.1,1.2,1.3,1.4
    if(depth_interval=1.0)
        depth_from.value&&depth_to.value = var
// something like this, i dont know much about scripts so forgive me
</script>

用户尝试编写脚本但对JavaScript语法不太熟悉，需要指导正确的实现方法。

步骤1：定义区间对应深度数据 #

先把每个Depth Interval对应的深度选项整理成映射表，方便后续调用：

// 可根据实际需求修改各区间的深度选项
const depthOptionsMap = {
    "1.0m": ["1.0", "1.1", "1.2", "1.3", "1.4"],
    "1.5m": ["1.5", "1.6", "1.7", "1.8", "1.9"],
    "3.0m": ["3.0", "3.1", "3.2", "3.3", "3.4"],
    "continuos": ["0.0", "0.5", "1.0", "1.5", "2.0", "2.5", "3.0"]
};

步骤2：编写下拉框更新函数 #

这个函数负责清空现有选项，并根据选中的区间插入对应的深度选项：

function updateDepthSelects(selectedInterval) {
    const fromSelect = document.getElementById('depth_from');
    const toSelect = document.getElementById('depth_to');
    
    // 保留默认的"..."选项，清空其他内容
    fromSelect.innerHTML = '<option value="...">...</option>';
    toSelect.innerHTML = '<option value="...">...</option>';
    
    // 未选中任何区间时直接返回
    if (!selectedInterval) return;
    
    // 获取当前区间对应的深度列表
    const depths = depthOptionsMap[selectedInterval];
    if (!depths) return;
    
    // 给两个下拉框批量添加选项
    depths.forEach(depth => {
        // 给depth_from添加选项
        const fromOption = document.createElement('option');
        fromOption.value = depth;
        fromOption.textContent = depth;
        fromSelect.appendChild(fromOption);
        
        // 给depth_to添加选项
        const toOption = document.createElement('option');
        toOption.value = depth;
        toOption.textContent = depth;
        toSelect.appendChild(toOption);
    });
}

步骤3：修改单选逻辑并绑定更新事件 #

在原有的单选控制函数中，添加触发下拉框更新的逻辑：

function onlyOne(checkbox) {
    const checkboxes = document.getElementsByName('depth_interval');
    let selectedValue = null;
    
    checkboxes.forEach(item => {
        if (item !== checkbox) {
            item.checked = false;
        } else if (item.checked) {
            selectedValue = item.value;
        }
    });
    
    // 触发深度下拉框更新
    updateDepthSelects(selectedValue);
}

完整整合代码 #

替换原有的脚本部分，整合后的完整代码如下：

<label>
    Depth Interval:
</label>
<br>
<input type="checkbox" id="depth_interval1.0" name="depth_interval" onclick="onlyOne(this)" value="1.0m" />
    <label for="depth_interval1.0"> 1.0m</label>
<input type="checkbox" id="depth_interval1.5" name="depth_interval" onclick="onlyOne(this)" value="1.5m" />
    <label for="depth_interval1.5"> 1.5m</label>
<input type="checkbox" id="depth_interval3.0" name="depth_interval" onclick="onlyOne(this)" value="3.0m" />
    <label for="depth_interval3.0"> 3.0m</label>
<input type="checkbox" id="depth_interval_cont" name="depth_interval" onclick="onlyOne(this)" value="continuos" />
<label for="depth_interval_cont"> Continuos</label><br><br>

<label>
    Depth:
</label>
<br>
<select name="depth_from" id="depth_from">
    <option value="...">...</option>
</select>

to

<select name="depth_to" id="depth_to">
    <option value="...">...</option>
</select>

<script>
// 存储不同区间对应的深度选项
const depthOptionsMap = {
    "1.0m": ["1.0", "1.1", "1.2", "1.3", "1.4"],
    "1.5m": ["1.5", "1.6", "1.7", "1.8", "1.9"],
    "3.0m": ["3.0", "3.1", "3.2", "3.3", "3.4"],
    "continuos": ["0.0", "0.5", "1.0", "1.5", "2.0", "2.5", "3.0"]
};

function updateDepthSelects(selectedInterval) {
    const fromSelect = document.getElementById('depth_from');
    const toSelect = document.getElementById('depth_to');
    
    fromSelect.innerHTML = '<option value="...">...</option>';
    toSelect.innerHTML = '<option value="...">...</option>';
    
    if (!selectedInterval) return;
    
    const depths = depthOptionsMap[selectedInterval];
    if (!depths) return;
    
    depths.forEach(depth => {
        const fromOption = document.createElement('option');
        fromOption.value = depth;
        fromOption.textContent = depth;
        fromSelect.appendChild(fromOption);
        
        const toOption = document.createElement('option');
        toOption.value = depth;
        toOption.textContent = depth;
        toSelect.appendChild(toOption);
    });
}

function onlyOne(checkbox) {
    const checkboxes = document.getElementsByName('depth_interval');
    let selectedValue = null;
    
    checkboxes.forEach(item => {
        if (item !== checkbox) {
            item.checked = false;
        } else if (item.checked) {
            selectedValue = item.value;
        }
    });
    
    updateDepthSelects(selectedValue);
}

// 可选：页面加载时默认选中1.0m并显示对应选项
document.getElementById('depth_interval1.0').checked = true;
updateDepthSelects('1.0m');
</script>

额外说明 #

• 可直接修改depthOptionsMap中的数据，调整各区间对应的深度范围和选项内容。
• 若不需要默认选中的区间，可删除脚本末尾的默认选中代码。

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