jQuery添加DropdownList项后，Postback时新增项消失问题求助

问题本质是：你用jQuery在客户端动态添加的DropDownList选项只存在于浏览器内存中，ASP.NET回发时会重新根据服务器端控件的Items集合渲染DropDownList，而这些新增项并没有同步到服务器端的集合里，所以回发后会消失，后台也无法识别。

以下是可行的解决思路：

1. 用隐藏域同步新增项到服务器端 #

通过隐藏域存储所有新增的选项内容，回发后在后台把这些内容重新添加到DropDownList的Items集合中，确保回发后控件能重新渲染这些选项。

• 前端步骤：

  1. 添加一个服务器端隐藏域：

     <input type="hidden" id="hdnNewProjects" runat="server" />
     

  2. 修改添加选项的JavaScript代码，同步更新隐藏域：

     const newProjectName = $('#txtNewProjectName').val();
     // 添加新选项到下拉列表
     $('#ddlProjectName').append(new Option(newProjectName, newProjectName));
     $('#ddlProjectName').val(newProjectName);
     // 把新选项存入隐藏域，用逗号分隔多个项
     const existingItems = $('#hdnNewProjects').val();
     $('#hdnNewProjects').val(existingItems ? `${existingItems},${newProjectName}` : newProjectName);
     

• 后台步骤（在Page_Load事件中处理）：

  protected void Page_Load(object sender, EventArgs e)
  {
      if (IsPostBack && !string.IsNullOrEmpty(hdnNewProjects.Value))
      {
          string[] newProjects = hdnNewProjects.Value.Split(',');
          foreach (string project in newProjects)
          {
              // 避免重复添加相同选项
              if (!ddlProjectName.Items.Contains(new ListItem(project, project)))
              {
                  ddlProjectName.Items.Add(new ListItem(project, project));
              }
          }
      }
  }
  

2. 改用纯客户端下拉控件+隐藏域 #

如果业务允许，放弃ASP.NET服务器端的DropDownList，使用纯HTML的<select>，配合隐藏域存储选中值，回发时后台直接读取隐藏域的值即可，无需依赖服务器端控件的Items集合。

• 前端代码：

  <!-- 初始选项可以从后台绑定 -->
  <select id="ddlProjectName">
      <% foreach (var project in ProjectList) { %>
          <option value="<%= project.Value %>"><%= project.Text %></option>
      <% } %>
  </select>
  <input type="hidden" id="hdnSelectedProject" runat="server" />
  

• 前端JavaScript代码：

  // 添加新选项并同步选中值到隐藏域
  const newProjectName = $('#txtNewProjectName').val();
  $('#ddlProjectName').append(new Option(newProjectName, newProjectName));
  $('#ddlProjectName').val(newProjectName);
  $('#hdnSelectedProject').val(newProjectName);
  
  // 监听下拉变化，实时同步选中值到隐藏域
  $('#ddlProjectName').on('change', function() {
      $('#hdnSelectedProject').val($(this).val());
  });
  

• 后台取值：
  直接读取hdnSelectedProject.Value就能获取用户选中的项目名称，不管是原有选项还是新增选项。

3. 用AJAX先保存新增项到数据源再刷新下拉列表 #

当用户输入新项目后，先通过AJAX把新项提交到后台保存到数据源（比如数据库），然后重新获取最新的项目列表并刷新下拉控件。这种方式下，回发时DropDownList的选项是从服务器端数据源加载的，不会丢失。

• 前端AJAX代码：

  const newProjectName = $('#txtNewProjectName').val();
  $.ajax({
      url: 'YourPage.aspx/AddNewProject',
      type: 'POST',
      contentType: 'application/json; charset=utf-8',
      data: JSON.stringify({ projectName: newProjectName }),
      success: function() {
          // 重新加载下拉列表的选项
          $.get('YourPage.aspx/GetAllProjects', function(projects) {
              $('#ddlProjectName').empty();
              $.each(projects, function(i, project) {
                  $('#ddlProjectName').append(new Option(project.Text, project.Value));
              });
              // 选中刚添加的项目
              $('#ddlProjectName').val(newProjectName);
          });
      }
  });
  

• 后台WebMethod代码：

  [WebMethod]
  public static void AddNewProject(string projectName)
  {
      // 这里写保存新项目到数据库的逻辑
      YourDbContext.Projects.Add(new Project { Name = projectName });
      YourDbContext.SaveChanges();
  }
  
  [WebMethod]
  public static List<ListItem> GetAllProjects()
  {
      // 获取最新的项目列表
      var projects = YourDbContext.Projects.ToList();
      return projects.Select(p => new ListItem(p.Name, p.Id.ToString())).ToList();
  }
  

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