JQUERY AJAX多个级联下拉列表选择不加载问题

Question

I am trying to use AJAX Cascading DropDownList using jQuery in ASP.Net. 我试图在ASP.Net中使用jQuery使用AJAX级联DropDownList。 But when I select the first dropdownlist (ddl_il) I can't reach second Dropdownlist with jquery, I am getting the error as a null what is my problem about jquery code? 但是，当我选择第一个dropdownlist（ddl_il）时，无法使用jquery到达第二个dropdownlist，我得到的错误是null，关于jquery代码的问题是什么？ how can I solve it? 我该如何解决？

在此处输入图片说明

Default.aspx Default.aspx的

<%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="JS/jquery-1.3.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function() {
        $("#loaderGif1").hide(); 
        $("#loaderGif2").hide();

        $("#ddl_ilce").html("<option value=''>Önce İl Seçiniz</option>");
        $("#ddl_semt").html("<option value=''>Önce İlçe Seçiniz</option>");

        $("#ddl_il").change(function() {
            ilChange();
        })

        $("#ddl_ilce").change(function() {
            ilceChange();
        })
    });

    function ilChange() {
        $("#loaderGif1").show();
        $("#ddl_ilce").attr("disabled", "true").html("<option value=''>Önce İl Seçiniz</option>");
        $("#ddl_semt").attr("disabled", "true").html("<option value=''>Önce İlçe Seçiniz</option>");

        var ilID = $("#ddl_il").val();

        var pagePath = window.location.pathname;



        $.ajax({
            type: "POST", //GET veya POST
            url: "Default.aspx/ilChange",
            contentType: "application/json; charset=utf-8",
            data: '{ilID:'+ilID+'}', 
            dataType: "json",
            success: onSucceeded1, 
            error: onFailed 
        });
        return false;
    }

    //istek başarılı olduğunda çalışacak fonksiyon
    function onSucceeded1(result) {
        $("#loaderGif1").hide();
        $("#ddl_ilce").removeAttr("disabled").html(result.d);

        $("#ddl_semt").removeAttr("disabled");
    }

    //istek hatalı olduğunda çalışacak fonksiyon
    function onFailed(result) {
        alert(result.d);
    }

    function ilceChange() {
        $("#loaderGif2").show();
        $("#ddl_semt").attr("disabled", "true").html("<option value=''>Önce İlçe Seçiniz</option>");
        var ilceID = $("#ddl_ilce").val();
        var pagePath = window.location.pathname;

        $.ajax({
            type: "POST",
            url: "Default.aspx/ilceChange",
            contentType: "application/json; charset=utf-8",
            data: '{ilceID:' + ilceID + '}',
            dataType: "json",
            success: onSucceeded2,
            error: onFailed
        });
        return false;
    }

    function onSucceeded2(result) {
        $("#loaderGif2").hide();
        $("#ddl_semt").removeAttr("disabled").html(result.d);
    }
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <table>
            <tr>
                <td>
                    il</td>
                <td>
                    <asp:DropDownList ID="ddl_il" runat="server" >
                    </asp:DropDownList>
                </td>
            </tr>
            <tr>
                <td>
                    ilçe</td>
                <td>
                    <asp:DropDownList ID="ddl_ilce" runat="server" >
                    </asp:DropDownList>
                    <img id="loaderGif1" alt="" src="Images/loader.gif" style="width: 16px; height: 16px" /></td>
            </tr>
            <tr>
                <td>
                    semt</td>
                <td>
                    <asp:DropDownList ID="ddl_semt" runat="server">
                    </asp:DropDownList>
                    <img id="loaderGif2" alt="" src="Images/loader.gif" style="width: 16px; height: 16px" /></td>
            </tr>
        </table>

    </div>
    </form>
</body>
</html>

Default.aspx.cs Code Behind Default.aspx.cs背后的代码

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Web.Services;

public partial class _Default : System.Web.UI.Page 
{
    fonksiyon system = new fonksiyon();
    protected void Page_Load(object sender, EventArgs e)
    {
        SqlConnection baglantim = new SqlConnection("Data Source=Hkadir;Initial Catalog=il-ilce-Semt;Integrated Security=True");
        DataTable dataTableIl = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();

        baglantim.Open();
        try
        {
            sqlCommand = new SqlCommand("Select * from iller", baglantim);

            sqlAdapter = new SqlDataAdapter(sqlCommand);
            sqlAdapter.Fill(dataTableIl);

            ddl_il.DataSource = dataTableIl;
            ddl_il.DataTextField = "Ad";
            ddl_il.DataValueField = "IlID";
            ddl_il.DataBind();
            ListItem li = new ListItem("İl Seçiniz","");
            ddl_il.Items.Insert(0, li);
        }
        finally
        {
            baglantim.Close();
        }
    }


    public static string ilChange(string ilID)
    {
        System.Threading.Thread.Sleep(2000);
        SqlConnection baglantim = new SqlConnection("Data Source=Hkadir;Initial Catalog=il-ilce-Semt;Integrated Security=True");
        DataTable dataTableIlce = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();
        string result="";

        baglantim.Open();
        try
        {
            sqlCommand = new SqlCommand("Select * from ilceler where IlID=@IlID", baglantim);

            sqlCommand.Parameters.Add("IlID", SqlDbType.NVarChar);
            sqlCommand.Parameters["IlID"].Value = ilID;

            sqlAdapter = new SqlDataAdapter(sqlCommand);
            sqlAdapter.Fill(dataTableIlce);

            result += "<option value=''>İlçe Seçiniz</option>";
            foreach (DataRow dataRow in dataTableIlce.Rows)
            {
                result += "<option value='" + dataRow["IlceId"].ToString() + "'>" + dataRow["Ad"].ToString() + "</option>";
            }
            return result;
        }
        catch(Exception e)
        {
            return (e.ToString());
        }
        finally
        {
            baglantim.Close();
        }
    }


    public static string ilceChange(string ilceID)
    {
        System.Threading.Thread.Sleep(2000);
        SqlConnection baglantim = new SqlConnection("Data Source=Hkadir;Initial Catalog=il-ilce-Semt;Integrated Security=True");
        DataTable dataTableSemt = new DataTable();
        SqlCommand sqlCommand = new SqlCommand();
        SqlDataAdapter sqlAdapter = new SqlDataAdapter();
        string result = "";

        baglantim.Open();
        try
        {
            sqlCommand = new SqlCommand("Select * from semtler where IlceID=@IlceID", baglantim);

            sqlCommand.Parameters.Add("IlceID", SqlDbType.NVarChar);
            sqlCommand.Parameters["IlceID"].Value = ilceID;

            sqlAdapter = new SqlDataAdapter(sqlCommand);
            sqlAdapter.Fill(dataTableSemt);

            result += "<option value=''>Semt Seçiniz</option>";
            foreach (DataRow dataRow in dataTableSemt.Rows)
            {
                result += "<option value='" + dataRow["SemtId"].ToString() + "'>" + dataRow["Ad"].ToString() + "</option>";
            }
            return result;
        }
        catch (Exception e)
        {
            return (e.ToString());
        }
        finally
        {
            baglantim.Close();
        }
    }
}

Database : 数据库：

在此处输入图片说明

Answer 1

To use jQuery to directly call ASP.NET AJAX page methods you need to add the WebMethod attribute: 要使用jQuery直接调用ASP.NET AJAX页面方法，您需要添加WebMethod属性：

[WebMethod]
public static string ilChange(string ilID)
{
     ///
}

Answer 2

After having a view on all your code : try to change this line $("#ddl_ilce").removeAttr("disabled").html(result.d); 查看所有代码后：尝试更改此行$("#ddl_ilce").removeAttr("disabled").html(result.d); to $("#ddl_ilce").removeAttr("disabled").Append(result); 到$("#ddl_ilce").removeAttr("disabled").Append(result); and $("#ddl_semt").removeAttr("disabled").Append(result); 和$("#ddl_semt").removeAttr("disabled").Append(result); to $("#ddl_semt").removeAttr("disabled").html(result); 到$("#ddl_semt").removeAttr("disabled").html(result); both in your functions onsucceeded & onsucceded2 . 都在您的函数onsucceeded和onsucceded2 。 I presume it can be the error. 我认为这可能是错误。

JQUERY AJAX多个级联下拉列表选择不加载问题

问题描述

2 个解决方案

解决方案1
3 已采纳 2014-04-16 22:13:20

解决方案2
0

JQUERY AJAX多个级联下拉列表选择不加载问题

问题描述

2 个解决方案

解决方案1 3 已采纳 2014-04-16 22:13:20

解决方案2 0

解决方案1
3 已采纳 2014-04-16 22:13:20

解决方案2
0