ajax省市县联动

最新推荐文章于 2025-09-10 20:20:06 发布

转载最新推荐文章于 2025-09-10 20:20:06 发布 · 69 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/zsss/archive/2013/01/07/2849862.html

文章标签：

#xhtml #数据库 #c#

本文介绍了一种使用JavaScript和ASP.NET实现省市县三级联动下拉框选择的方法。通过异步请求获取数据库中的省份、城市及区县信息，并动态填充到对应的下拉框中，实现了用户友好的地区选择功能。

procitysel.htm

<!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>
    <title></title>
    <script src="procitysel.js" type="text/javascript"></script>
</head>
<body>
    <select id="proSel" >
    </select>
    <select id="citySel">
    </select>
     <select id="deSel" >
    </select>
</body>
</html>

procitysel.js

//创兼容所以游览器的建异步请求对象
function CreateXhr() {
    var xhrobj = false;
    try {
        xhrobj = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
        try {
            xhrobj = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch (e1) {
            xhrobj = false;
        }
    }
    if (!xhrobj && typeof XMLHttpRequest != "underfined") {
        //创建异步以求对象
        xhrobj = new XMLHttpRequest();
    }
    return xhrobj;
}
var xhr = CreateXhr();
window.onload = function () {
    loadPr();
    document.getElementById("proSel").onchange = function () {
    selectcity(document.getElementById("proSel").value);

    }
    document.getElementById("citySel").onchange = function () {
        selectDe(document.getElementById("citySel").value);
    }
}
function loadPr() {
    xhr.open("Get", "procitysel.ashx?type=1", true);
    //   xhr.setRequestHeader("If-ModeFied-Since", "0")
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var jsonList = eval(xhr.responseText);
                var proSel = document.getElementById("proSel");
                // alert(jsonList[1].prName)
                for (var i = 0; i < jsonList.length; i++) {
                    proSel.options[i] = new Option(jsonList[i].prName, jsonList[i].prId);
                }
                selectcity(document.getElementById("proSel").value);
            }
        }
    }
    xhr.send(null);
}
function selectcity(proSelId) {
    document.getElementById("citySel").length = 0;
    document.getElementById("deSel").length = 0;
    xhr.open("Get", "procitysel.ashx?type=2&proId=" + proSelId + "", true);
    //   xhr.setRequestHeader("If-ModeFied-Since", "0")
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {
                var jsonList = eval(xhr.responseText);
                var citySel = document.getElementById("citySel");
                // alert(jsonList[1].prName)
                for (var i = 0; i < jsonList.length; i++) {
                    citySel.options[i] = new Option(jsonList[i].cName, jsonList[i].cId);
                }

                selectDe(document.getElementById("citySel").value);
            }
        }
    }
    xhr.send(null);
}
function selectDe(dId) {
    xhr.open("Get", "procitysel.ashx?type=3&dId=" + dId + "", true);
    // xhr.setRequestHeader("If-ModeFied-Since", "0")
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4) {
            if (xhr.status == 200) {

             //  alert(xhr.responseText);
                try {
                    var jsonList = eval(xhr.responseText);
                }
                catch (e) {
                    return;
                }
                var deSel = document.getElementById("deSel");
                // alert(jsonList[1].prName)
                for (var i = 0; i < jsonList.length; i++) {
                    deSel.options[i] = new Option(jsonList[i].dName, jsonList[i].dId);
                }


            }
        }
    }
    xhr.send(null);
}

procitysel.ashx

<%@ WebHandler Language="C#" Class="procitysel" %>

using System;
using System.Web;
using System.Data.SqlClient;
using System.Configuration;
public class procitysel : IHttpHandler
{


    public void ProcessRequest(HttpContext context)
    {
        context.Response.ContentType = "text/plain";
        string type = (string)context.Request.QueryString["type"];
        string connStr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
        SqlConnection conn = new SqlConnection(connStr);
        System.Text.StringBuilder sb = new System.Text.StringBuilder();
        if (type == "1")
        {
            conn.Open();
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;
            cmd.CommandText = "select * from  dbo.T_Province";
            SqlDataReader dr = cmd.ExecuteReader();
            sb.Append("[");
            while (dr.Read())
            {
                sb.Append("{prId:" + (string)dr[0].ToString() + ",prName:'" + (string)dr[1] + "'},");
            }
            sb.Append("]");
            conn.Close();
            dr.Close();
            string strHtml=sb.ToString().Remove(sb.Length-2,1);
            context.Response.Write(strHtml);
        }
        else if (type == "2")
        {
            conn.Open();
            string proId = (string)context.Request.QueryString["ProId"];
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;
            cmd.CommandText = "select * from  dbo.T_City where ProID=" + proId + "";
            SqlDataReader dr = cmd.ExecuteReader();
            sb.Append("[");
            while (dr.Read())
            {
                sb.Append("{cId:" + (string)dr[0].ToString() + ",cName:'" + (string)dr[1] + "'},");
            }
            sb.Append("]");
            conn.Close();
            dr.Close();
            string strHtml = sb.ToString().Remove(sb.Length - 2, 1);
            context.Response.Write(strHtml);
        }
        else if (type == "3")
        {
            conn.Open();
            string dId = (string)context.Request.QueryString["dId"];
            SqlCommand cmd = new SqlCommand();
            cmd.Connection = conn;
            cmd.CommandText = "select * from  dbo.T_District where CityID=" + dId + "";
            SqlDataReader dr = cmd.ExecuteReader();
            sb.Append("[");
            while (dr.Read())
            {
                sb.Append("{dId:" + (string)dr[0].ToString() + ",dName:'" + (string)dr[1] + "'},");
            }
            sb.Append("]");
            conn.Close();
            dr.Close();
            string strHtml = sb.ToString().Remove(sb.Length - 2, 1);
            context.Response.Write(strHtml);
        }
    }

    public bool IsReusable
    {
        get
        {
            return false;
        }
    }

}