ASP.NET中动态生成依赖DDL无法获取选中值存入SQL的问题

你用JavaScript动态生成的下拉框属于客户端HTML元素，既不是ASP.NET服务器控件，也不会被ASP.NET的视图状态跟踪。直接调用ubigeoDep_div.ToString()只能得到控件的类型名称（System.Web.UI.HtmlControls.HtmlGenericControl），因为这个div本身不存储下拉框的选中值，后台也无法直接访问到动态生成的下拉框实例。

下面提供几种简单可行的实现方式：

方式1：用隐藏域传递选中值（推荐） #

在ASP.NET页面中添加带runat="server"的隐藏域，用于存储下拉框的选中值，JavaScript在切换选项时同步更新隐藏域的值，后台直接读取隐藏域的Value属性即可。

前端代码 #

<%-- 隐藏域用于存储选中值 --%>
<asp:HiddenField ID="hfDepartamento" runat="server" />
<asp:HiddenField ID="hfCiudad" runat="server" />
<asp:HiddenField ID="hfRegion" runat="server" />

<%-- 存放动态下拉框的容器 --%>
<div id="ubigeoDep_div"></div>

JavaScript代码 #

在showDepartamento函数或下拉框的onchange事件中，同步更新隐藏域：

// 假设选中部门后执行
function onDepartamentoChange(selectedValue) {
    // 获取隐藏域的客户端ID（ASP.NET会自动生成）
    document.getElementById('<%= hfDepartamento.ClientID %>').value = selectedValue;
    // 后续生成城市下拉框的逻辑...
}

后台C#代码 #

提交表单时直接读取隐藏域的值：

string departamento = hfDepartamento.Value;
string ciudad = hfCiudad.Value;
string region = hfRegion.Value;

// 后续存入SQL数据库的逻辑...

方式2：通过Request.Form获取表单值 #

如果不想用隐藏域，可以在JavaScript生成下拉框时给它设置name属性，后台通过Request.Form直接读取表单提交的参数值，前提是下拉框必须在<form runat="server">标签内部。

JavaScript代码 #

生成下拉框时指定name：

function showDepartamento() {
    var selectDep = document.createElement('select');
    selectDep.name = "departamento"; // 设置name属性
    // 添加下拉选项逻辑...
    document.getElementById('ubigeoDep_div').appendChild(selectDep);
    
    // 给下拉框绑定change事件，生成城市下拉框时同样设置name="ciudad"
    selectDep.onchange = function() {
        var selectedDep = this.value;
        // 生成城市下拉框，设置name="ciudad"
        var selectCiudad = document.createElement('select');
        selectCiudad.name = "ciudad";
        // 添加城市选项...
        document.getElementById('ubigeoDep_div').appendChild(selectCiudad);
    };
}

后台C#代码 #

string departamento = Request.Form["departamento"];
string ciudad = Request.Form["ciudad"];
string region = Request.Form["region"];

方式3：改用ASP.NET服务器控件（复杂场景） #

如果需要服务器端直接控制下拉框的状态，可以动态创建DropDownList服务器控件，但必须在Page_Init事件中重建控件（ASP.NET回发时会重建控件树），同时需要手动重新绑定选项。这种方式适合需要服务器端频繁交互的场景，但实现成本较高。

后台C#代码 #

protected void Page_Init(object sender, EventArgs e)
{
    if (IsPostBack)
    {
        // 重建部门下拉框
        DropDownList ddlDepartamento = new DropDownList();
        ddlDepartamento.ID = "ddlDepartamento";
        ubigeoDep_div.Controls.Add(ddlDepartamento);
        // 重新绑定部门选项（从数组或数据库读取）
        ddlDepartamento.DataSource = 你的部门数组;
        ddlDepartamento.DataBind();
        
        // 如果有选中值，恢复选中状态
        if (!string.IsNullOrEmpty(Request.Form["ddlDepartamento"]))
        {
            ddlDepartamento.SelectedValue = Request.Form["ddlDepartamento"];
        }
    }
}

后台获取选中值 #

DropDownList ddlDepartamento = ubigeoDep_div.FindControl("ddlDepartamento") as DropDownList;
string departamento = ddlDepartamento?.SelectedValue;

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