Ajax动态追加下拉选项后提交值为null的问题

嘿，我碰到过好多次这种情况，大概率是你动态生成选项的时候没处理好细节，我给你梳理几个最可能的原因和解决办法：

1. 必须给动态生成的<option>设置value属性 #

看你代码里的循环没写完，估计是这里漏了关键的value设置！如果你的选项只有显示文本，没有value属性，表单提交时浏览器根本没法传递有效数据，后台拿到的自然是null。正确的写法应该是这样：

for( var i = 0; i<len; i++){
    // 假设你的返回数据里有id（对应value）和name（显示文本）字段
    var modelId = response[i].id;
    var modelName = response[i].name;
    $("#sel_model").append(`<option value="${modelId}">${modelName}</option>`);
}

用模板字符串拼接更清晰，也不容易出错。

2. 检查下拉框的name属性是否存在 #

别小看这个！如果你的<select>标签没有设置name属性，表单提交时这个字段根本不会被发送到后台，比如：

<!-- 错误写法：只有id没有name -->
<select id="sel_model"></select>

<!-- 正确写法：必须有name属性 -->
<select id="sel_model" name="selected_model"></select>

后台就是通过name来获取字段值的，没有的话肯定拿不到。

3. 确认AJAX返回的JSON数据结构正确 #

有时候问题出在数据本身，你可以在success回调里加个console.log(response)，看看返回的JSON数组里每个对象的字段是不是你预期的。比如你以为字段是id，但后端返回的是model_id，那生成的value就是空的，提交自然是null。

4. 可选：默认选中第一个选项（避免用户未选择的情况） #

如果用户没有手动选择动态生成的选项，下拉框会处于未选中状态，提交时也会返回null。你可以在生成完所有选项后，默认选中第一个：

// 生成完选项后执行
$("#sel_model option:first").prop("selected", true);

5. 用更稳妥的方式创建DOM元素（可选） #

如果拼接字符串容易出错，你可以用jQuery创建元素的方式，更可靠：

for( var i = 0; i<len; i++){
    var option = $("<option>")
                   .val(response[i].id)
                   .text(response[i].name);
    $("#sel_model").append(option);
}

你先对照这几点检查你的代码，尤其是前两点，应该就能解决问题啦！

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