Question

我需要根据从Jquery对话框中第一个下拉列表中选择的值，从数据库更新我的第二个下拉列表。

ASPX

<asp:UpdatePanel ID="upnl" OnLoad="upnl_Load" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<div id="dv" style="display: none;" title="Tile">
<table>
    <tr>
        <td>Parent</td>
        <td>
            <asp:DropDownList ID="ddlDialog1" runat="server" /></td>
    </tr>
    <tr>
        <td>Child</td>
        <td>
            <asp:DropDownList ID="ddlDialog2" runat="server" /></td>
    </tr>
</table>
</div >
</ContentTemplate>
</asp:UpdatePanel>

JQuery的

function EditBookingDialog() {
    jQuery(document).ready(function () {
        $("#dvEditBooking").dialog({
            draggable: true,
            modal: true,
            width: 500,
            height: 400
            ,
            open: function (type, data) {
                $("#<%= ddlDialog1.ClientID %>").change(function () {
                    __doPostBack('<%= upnl.ClientID %>', "DialogOnChange");
                });
            }
        });
    });
}

代码

protected void upnl_Load(object sender, EventArgs e)
{
if (arg.ToString().IndexOf("DialogOnChange") > -1)
{
    // Here ddlDialog1.SelectedValue is always " ", Even I get a data set of values,ddlDialog2 is not populated with new values 
    ddlDialog2.DataSource = objMngr.GetData(ddlDialog1.SelectedValue);
    ddlDialog2.DataValueField = "Id";
    ddlDialog2.DataTextField = "name";
    ddlDialog2.DataBind();
}
 upnl.Update();
}

这里的问题是，如何在第一个下拉列表中的值更改时填充第二个下拉列表（ddlDialog2）。

有什么想法吗？

Answer 1

您需要添加第一个下拉列表的服务器端更改事件。修改第1个下拉列表的html，如下所示。

<asp:DropDownList ID="ddlDialog1" runat="server" OnSelectedIndexChanged="upnl_Load()" />

删除jquery更改并手动调用_do postback

    $("#<%= ddlDialog1.ClientID %>").change(function () {

          $.ajax(function{
          url: "/YourPage.aspx"
          type:"POST"
          data:{"FirstDropDownValue" : $(this).val() }
          success:function(msg){
            //bind your second dropdown here.
            if(msg.d != null)
             {

      // Looping over list
        $.each(msg.d, function (index, value) {
            $("#ddlDialog1").append($("<option>   </option>").val(value["Id"]).html(value["name"]));

             });
           }

    });

按如下所示更新服务器端方法

[WebMethod]
public static List<Myclass> void upnl_Load( string FirstDropDownValue)
{
  if (FirstDropDownValue != "-1")
  {
    return objMngr.GetData(FirstDropDownValue);
  }

  upnl.Update();
}

基于第一个加载第二个下拉列表 - JQuery Dialog

1 个答案: