基于第一个 - JQuery 对话框加载第二个下拉列表

Load second dropdown based on first - JQuery Dialog

本文关键字：加载 第二个 下拉列表 对话框 JQuery 第一个      更新时间：2023-09-26

我需要根据从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>

杰奎里

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）。

知道吗？

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

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

删除 jQuery 更改并手动调用_do回发

    $("#<%= 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();
}
相关文章：