根据输入值切换SELECT下拉框时仅最后一个可正常提交的解决方法

问题根因 #

两个调整原因下拉框共用了相同的name="reason"属性，即便通过CSS隐藏了其中一个，该元素依然存在于DOM结构中。表单提交时遇到同名参数会默认取最后一个DOM元素的值上传，因此永远只能拿到靠后位置的下拉框取值。

可选修复方案 #

方案1：兼容现有DOM结构，动态控制name属性 #

仅修改JS逻辑，不需要调整HTML结构，隐藏的下拉框会移除name属性避免参数冲突，显示的下拉框添加name属性保证参数正常提交。
修改后的JS代码如下：

$(document).ready(function () {
    // 初始化隐藏两个下拉框，同时移除隐藏元素的name属性
    if ($("#invAmt").val()=='') {
        $("#plus").hide().removeAttr("name");
        $("#minus").hide().removeAttr("name");
    } 
  
  $(document).on('change', '#invAmt', function() {
     const invVal = Number($("#invAmt").val());
     if (invVal >= 1) {
        $("#plus").show().attr("name","reason");
        $("#minus").hide().removeAttr("name");
    } else if(invVal < 0) {
        $("#plus").hide().removeAttr("name");
        $("#minus").show().attr("name","reason");
    } else {
        // 调整值为0时都隐藏
        $("#plus").hide().removeAttr("name");
        $("#minus").hide().removeAttr("name");
    }
  });
});

方案2：更优方案，单下拉框动态切换选项 #

删除冗余的双select DOM结构，仅保留一个reason下拉框，根据调整值的正负动态加载对应选项，从根源上避免参数冲突问题。
修改后的HTML代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group">
    <label for="invDec">Enter Amount of Units to Adjust (+/-): </label>
    <input name="invAmt" id="invAmt" style="width:50px" >
</div>
<label for="reason">Reason for Adjustment:</label>
<div>
    <select class="custom-select custom-select-md" name="reason" id="reason" style="width:370px">
        <option value="">--- 请先输入调整值 ---</option>
    </select>
</div>

修改后的JS代码：

$(document).ready(function () {
    // 定义正负调整对应的选项列表
    const reasonOptions = {
        plus: [
            {value: "30", text: "Returned Product"},
            {value: "50", text: "Other (explain in notes)"}
        ],
        minus: [
            {value: "70", text: "Recount (lost)"},
            {value: "75", text: "Dumped / Died)"},
            {value: "90", text: "Diseased / Pest"},
            {value: "65", text: "Overgrown"},
            {value: "95", text: "Overstock"},
            {value: "98", text: "Loaned Out"},
            {value: "100", text: "Other (explain in notes)"}
        ]
    }
    // 初始化隐藏下拉框
    $("#reason").hide();
  
    $(document).on('change', '#invAmt', function() {
        const invVal = Number($("#invAmt").val());
        const $reasonSelect = $("#reason");
        // 先清空现有选项
        $reasonSelect.empty();
        // 加默认提示项
        $reasonSelect.append(`<option value="">--- Select Reason ---</option>`);
        if (invVal >= 1) {
            // 正向调整加载对应选项
            reasonOptions.plus.forEach(item => {
                $reasonSelect.append(`<option value="${item.value}">${item.text}</option>`)
            })
            $reasonSelect.show();
        } else if(invVal < 0) {
            // 负向调整加载对应选项
            reasonOptions.minus.forEach(item => {
                $reasonSelect.append(`<option value="${item.value}">${item.text}</option>`)
            })
            $reasonSelect.show();
        } else {
            // 调整值为0时隐藏
            $reasonSelect.hide();
        }
    });
});

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