使用Ajax从数据库生成select下拉选项出现NaN无内容问题排查

云原生阿岚

2026-9-29

问题原因及修复方案

核心错误点

字符串拼接语法错误：你在拼接select标签和返回的option字符串时，连续写了两个加号：
```
"<select name='drug[]'' class='form-control'>" +
+ data +
```
连续的+会被JS解析为一元加号运算符，会尝试把你返回的HTML字符串强制转换为数字，转换失败就得到了NaN，这就是select内容变成NaN的直接原因。
HTML属性语法错误：select标签的name属性末尾多写了一个多余的单引号name='drug[]''，导致HTML属性解析异常，就是你审查元素看到的'=""异常属性的来源。

修正后的点击监听代码

$("#add_prescription").click(function(e) {
    e.preventDefault();
    $.ajax({
        type: 'GET',
        url: 'drugs',
        success: function(data) {
            $('#prescription-container').append(" <div class='row'> <div class='col-md-6'>" +
                "<div class='form-group'>" +
                // 修正了name属性多余的单引号，去掉了多余的加号
                "<label for='drug' class='form-label'>Medicine </label><select name='drug[]' class='form-control'>" +
                data +
                "</select>" +
                "</div>" +
                "</div>" +
                "<div class='col-sm-6'>" +
                "<div class='form-group'>" +
                "<label>Comment</label>" +
                "<div class='phone-icon'>" +
                "<input type='text' class='form-control' name='diagnosis'>" +
                "</div>" +
                "</div>" +
                "</div>" +
                "</div>")
        }
    })
})