单选按钮触发下拉列表数据追加失败问题求助

核心问题分析 #

你的代码中前端无法正确读取JSON返回的属性值，是导致下拉列表无内容的直接原因：

• C#的SelectListItem序列化为JSON后，属性名是大写开头的Text/Value，但前端代码中用了小写的text，导致无法获取文本内容。
• 同时存在几处次要问题（AJAX参数拼写、异常处理冗余等），也会影响功能稳定性。

分步修正代码 #

1. 业务逻辑类（Procedures）优化 #

• 给SelectListItem的Value赋值（临时用循环索引或数据库中的ID，后续可替换为自增变量）
• 移除多余的con.Close()（using块会自动释放连接）
• 异常捕获块添加日志输出，避免吞异常导致调试困难

public class Procedures
{
    public List<SelectListItem> SelectAnswer(int questionid)
    {
        List<SelectListItem> ds = new List<SelectListItem>();
        String Con = "YOUR CONNECTION STRING";
        try
        {
            using (SqlConnection con = new SqlConnection(Con))
            {
                con.Open();
                using (SqlCommand cmd = new SqlCommand("SelectAnswer", con))
                {
                    cmd.CommandType = CommandType.StoredProcedure;
                    cmd.Parameters.Add("@questionid", SqlDbType.Int).Value = questionid;

                    var dataReader = cmd.ExecuteReader();
                    int index = 1; // 临时自增Value
                    while (dataReader.Read())
                    {
                        var item = new SelectListItem();
                        item.Text = dataReader["QuestionDesc_F"].ToString();
                        item.Value = index.ToString(); // 临时赋值，后续可替换为数据库ID
                        ds.Add(item);
                        index++;
                    }
                }
            }
        }
        catch (Exception ex)
        {
            // 添加日志输出，方便调试
            Console.WriteLine($"Error loading answers: {ex.Message}");
            throw; // 可选：重新抛出异常，让上层感知错误
        }
        return ds;
    }
}

2. 控制器代码优化 #

• 添加JsonRequestBehavior.AllowGet（ASP.NET MVC早期版本需要，允许GET/POST返回JSON）
• 简化冗余代码

public ActionResult SelectAnswer(int questionid)
{
    var ds = new Procedures().SelectAnswer(questionid);
    // 若使用ASP.NET Core，直接return Json(ds);即可
    return Json(ds, JsonRequestBehavior.AllowGet);
}

3. 前端jQuery代码修正 #

• 修正data[index].text为data[index].Text（匹配JSON返回的属性名）
• 修正ajaxasync为async（参数名拼写错误）
• 优化$.each的参数用法，直接遍历每个item更直观
• 移除无关的dataTable清空代码（如果和当前下拉功能无关）

$("input[name='radio']").on("change", function() {
    var questionid = this.value;
    var eleUpdate = $('#offerDropdown');
    $.ajax({
        type: "post",
        url: '@Url.Action("SelectAnswer", "Question_Option")',
        async: true,
        data: { questionid: questionid },
        success: function(data) {
            // 清空原有选项
            eleUpdate.empty();
            // 添加默认选项
            eleUpdate.append('<option value="">@GetResource("Label.Global.Select")</option>');
            // 遍历数据生成选项
            $.each(data, function(index, item) {
                var $option = $('<option>');
                $option.val(item.Value).text(item.Text);
                eleUpdate.append($option);
            });
            eleUpdate.val('').trigger('change');
        },
        error: function(xhr) {
            // 添加错误提示，方便调试
            console.log("AJAX Error: ", xhr.responseText);
        }
    });
});

调试验证步骤 #

1. 打开浏览器控制台（F12），切换到Network标签，选中AJAX请求，查看返回的JSON数据结构，确认属性名是Text和Value。
2. 在前端success函数开头添加console.log(data);，直接打印返回数据，验证是否能正确读取item.Text和item.Value。

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