级联下拉菜单，使用 jQuery

• 下载源代码 - 354 KB

引言

在本文中，我将解释如何使用 jQuery 和 AJAX 创建级联下拉菜单。 级联下拉菜单由 AJAX Control Toolkit 提供，但使用这种技术，您可以更好地控制代码，并且易于扩展和实现。 此外，jQuery 比 AJAX Control Toolkit 更轻量级。

使用代码

jQuery 通过服务器端方法调用的方式如下

[WebMethod]
public static Dictionary<string, object> GetFileType(string x, string y)
{
    try{
        Dictionary<string, object> dd = new Dictionary<string, object>();
        dd = GetFromDataBase("Select FiletypeId,Filetypename from M_FileType");
        return dd;
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

private static Dictionary<string, object> GetFromDataBase(string Query)
{
    try
    {
        DataSet ds = new DataSet();
        OracleConnection oCon = new OracleConnection(Your Connection String goes here);
        OracleCommand oCmd = new OracleCommand(Query, oCon);
        OracleDataAdapter da = new OracleDataAdapter(oCmd);
        da.Fill(ds);
        return HimJSON1.ToJson(ds.Tables[0]);
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

在源代码中，放置下拉列表

<asp:DropDownList ID="ddFileType" class="FillDD" 
  SuccessMethod="outputDT" TargetControl="ddFileColumn" 
  ErrorMethod="ShowError" Item="FILECOLID" 
  Description="NAME" 
  ServerMethod="Default.aspx/GetFileColumn" width="300 px" 
  runat="server">
    <asp:ListItem Value="-1">---Select---</asp:ListItem>
</asp:DropDownList> 

在这里，您会看到一些额外的属性

• SuccessMethod：服务器端方法成功执行后将调用它。
• ErrorMethod：服务器端方法抛出异常时将调用它。
• TargetControl：将在父下拉菜单的所选项更改时绑定的子下拉菜单的 ID。
• Item：子下拉菜单的项字段，它将绑定到数据表返回的表列。
• Description：子下拉菜单的描述字段，它将绑定到数据表返回的表列。
• ServerMethod：jQuery 将调用的服务器端方法的名称。

探索 JS 代码

• function outputDT：当服务器端方法返回成功结果时，将调用此函数。 在此方法中，我调用了 BindDropdown() 方法，该方法负责绑定子下拉菜单。 您可以修改此方法以实现任何其他功能。
• function ShowError：当服务器端方法抛出任何异常时，将调用此函数。 您可以修改此函数以优雅地处理异常。
• $('.FillDD').change(function(e)：每当具有属性 class="FillDD" 的下拉菜单的所选项更改时，这将被调用。

注意：除了使用服务器端方法外，您还可以使用 Web Service。

在这里，如您所见，它只需要在父下拉菜单中编写一些属性，您就可以使用级联下拉菜单了。

关注点

在源代码中，您将在 App_code 文件夹中找到两个文件。 在这些文件中，我实现了两种不同的方法来将 **datatable 转换为 JSON**，您会发现它们非常有趣且有用。 您不仅可以在这里使用这些类，还可以在任何想要将 datatable 转换为 JSON 的项目中进行使用。

任何建议和改进都将不胜感激。