如何在选择下拉选项后启用输入框？选中campoZero后激活campoOne

首先修正原HTML中的错误：输入框campoOne后面有一个多余的</select>标签，需删除以保证DOM结构正常。

接下来实现核心功能：通过JavaScript监听下拉框campoZero的选择事件，当用户选中有效选项时，启用原本禁用的输入框campoOne。

完整代码示例 #

<div id="one">
    <table> 
        <tr>
            <td class="honeydew">产品</td>
            <td class="honeydew">
                <select name="campoZero" class="honeydew" id="campoZero">
                    <option disabled selected>请选择</option>  
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
                <var id="valorZero"></var>
            </td>
        </tr>  
        <tr>
            <td class="gray">箱子数量</td>
            <td class="gray">
                <input disabled onchange="somaTudo()" type="text" name="campoOne" class="gray" id="campoOne" maxlength="3" value="">
                <var id="valorOne"></var>
            </td>
        </tr>
    </table>
</div>

<script>
// 获取对应DOM元素
const campoZero = document.getElementById('campoZero');
const campoOne = document.getElementById('campoOne');

// 监听下拉框选择变化
campoZero.addEventListener('change', function() {
    // 选中有效选项时启用输入框
    if (this.value) {
        campoOne.disabled = false;
    } else {
        // 重新选择默认选项时，可再次禁用输入框并清空内容（可选逻辑）
        campoOne.disabled = true;
        campoOne.value = '';
    }
});
</script>

代码说明 #

• 修正了原HTML的无效标签问题
• 将原英文文本翻译为中文，适配使用场景
• 通过change事件监听下拉框状态：
  • 选中非默认选项时，移除输入框的disabled属性以启用它
  • 若重新选择默认选项，可自动禁用输入框并清空内容，该逻辑可根据实际需求调整

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