使用 jquery ajax 填充的下拉列表在单击提交按钮后不显示答案

【问题标题】：Dropdown list filled using jquery ajax not showing after submit button click使用 jquery ajax 填充的下拉列表在单击提交按钮后不显示
【发布时间】：2014-05-20 12:49:43
【问题描述】：

我使用 jquery ajax 来填充下拉列表。一切正常，但是当我单击提交按钮时，填充的下拉列表被清除并且没有任何显示。

可能是什么问题？

我写的代码如下

 $("#locationList").change(function () {
             FillCashSafe();
         })

 function FillCashSafe() {
         $("#CashSafeLists").empty();
         var locationNo = document.getElementById('<%=locationList.ClientID%>').value;               
         $.ajax({
             url: "HealthReport.aspx/GetCashsafes",
             data: '{Location: "' + locationNo+ '"}',
             type: "POST",
             dataType: "json",
             contentType: "application/json; charset=utf-8",
             success: function (data) {
                 var optionhtml = '<option value="-1">Select One</option>';                     
                 if (data) {                        
                     $("#CashSafeLists").append(optionhtml)
                     $("#CashSafeLists").trigger("liszt:updated");
                     $.each(data.d, function (key, value) {
                         $("#CashSafeLists").append($("<option></option>").val(value.CashsafeId).html(value.CashsafeSerialNo));
                         $("#CashSafeLists").trigger("liszt:updated");
                     });                         
                 }
                 else {                        
                     $("#CashSafeLists").append(optionhtml)
                     $("#CashSafeLists").trigger("liszt:updated");
                 }                     
             },
             error: function (result) {                    
                 $("#CashSafeLists").append($("<option></option>").val("-1").html("Select one"));
                 $("#CashSafeLists").trigger("liszt:updated");
             }
         });

按钮点击如下

<input type="submit" id="Submit1" name="btnSearch" value="Search"
class="btn btn-primary btn-Addbutton " style="margin-left: 4px;" runat="server"   
onserverclick="SearchButtonClicked"  />

【问题讨论】：

您的页面在表单提交后刷新，清除了您添加到列表中的选项。您必须确保列表是在每次页面加载时构建的。
您是否通过单击按钮调用服务器函数？进行回发？
如果您正在使用更新面板，那么名为“CashSafeLists”的下拉菜单必须在更新面板之外，或者您应该每次像页面末尾的
没有使用更新面板
@Dean.DePue 服务器函数在按钮点击时被调用

标签： c# jquery asp.net ajax

【解决方案1】：

提交表单后，您的页面会刷新，清除您添加到列表中的选项。您必须确保列表是在每次页面加载时构建的。

实现这一点的一个简单技巧是在 DOM 准备好并分配处理程序后触发列表上的 change 事件：

$(function() {
    $("#locationList").change(function () {
        FillCashSafe();
    }).change(); // <-- added this!
});

【讨论】：

谢谢你说的对

【解决方案2】：

在服务器端，您需要使用Request.Form 名称值集合访问下拉列表的选定值。假设您的下拉列表有一个 IDof dropdown1 并且您正在使用 asp.net 网络表单。然后就可以使用下面的方法访问了。

string value = Request.Form[dropdown1.UniqueID];

【讨论】：