如何在切换下拉列表选项时自动清空输入框值

要实现切换几何体时自动清空对应输入框，无需使用reset()（会重置整个表单包括选择项），只需在切换形状的upform函数中手动清空目标输入框的值即可，同时可以顺带清空计算结果，提升用户体验。

修改后的JavaScript代码 #

function upform() {
    // 清空所有输入框和输出结果
    document.getElementById("id_radius").value = "";
    document.getElementById("id_radius2").value = "";
    document.getElementById("id_height2").value = "";
    document.getElementById("id_output").innerHTML = "";

    // 隐藏所有输入区域
    document.getElementById("id_inputs_sphere").hidden = true;
    document.getElementById("id_inputs_cone").hidden = true;

    let shape = document.getElementById("id_shapes").value;
    switch (shape) {
        case "sphere":
            document.getElementById("id_inputs_sphere").hidden = false;
            break;
        case "cone":
            document.getElementById("id_inputs_cone").hidden = false;
            break;
    }
}

function calculate() {
    let shape = document.getElementById("id_shapes").value;
    let volume = 0;
    switch (shape) {
        case "sphere":
            let radius = document.getElementById("id_radius").value;
            volume = 4/3 * Math.PI * radius**3;
            document.getElementById("id_output").innerHTML = "result = " + volume.toFixed(2);
            break;
        case "cone":
            let radius2 = document.getElementById("id_radius2").value;
            let height2 = document.getElementById("id_height2").value;
            volume = 1/3 * Math.PI * radius2**2 * height2;
            document.getElementById("id_output").innerHTML = "result = " + volume.toFixed(2);
            break;        
    }
}

说明 #

1. 在upform函数开头添加清空输入框和输出结果的代码，确保切换形状后输入框都是空白状态，同时清除之前的计算结果。
2. 修正了原代码中area变量名的错误（应该是volume，因为计算的是体积），并添加了toFixed(2)来格式化结果为两位小数，提升可读性。
3. 这种方式不会影响下拉选择框的选中状态，只清空输入框内容，完全符合需求。

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