jquery省市区联动+数据库

来源：互联网发布：金蝶初始数据如何录入编辑：程序博客网时间：2024/04/30 23:30

前台页ProAndCity.aspx

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

<!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 language="javascript" src="jquery-1[1].3.2.js"></script>
    <script language="javascript" type="text/javascript">

    /////////////////数据库里只有两级，当选择第三级时会出错///////////////////
    $(document).ready(function() {
    var beforeSendMessage = '正在加载,请稍候...';
    var ErrorMessage = '<span class="red">对不起,请求错误.请检查您的服务设置或者程序配置.</span>';

    //绑定省份下的城市
    $('#SelProvince').change(function() {
        $('#SelArea').attr('disabled', 'disabled');
        AjaxRequstFn('SelProvince', 'SelCity', 'city');
    });
    //绑定城市下的地区
    $('#SelCity').change(function() {
        AjaxRequstFn('SelCity', 'SelArea', 'area');
    });
    //选择地区后给文本框赋值
    $('#SelArea').change(function() {
        //获取ID为GetArea下的下拉菜单选中的值
        var GetText = $('#GetArea > select option:selected').text();
        $('#txtArea').val(GetText);
    });
    function AjaxRequstFn(FID, id, tableName) {
        $.ajax({
            type: 'GET',
            url: 'ProAndCity.aspx',
            processData: false,
            dataType: 'text',
            data: 'id=' + escape($('#' + FID).val()) + '&type=' + tableName,
            beforeSend: function(XMLHttpRequest) {
                $('#' + id).html(beforeSendMessage);
            },
            success: function(data, textStatus) {
                FormatData(data, id); //格式化字符串
            },
            complete: function(XMLHttpRequest, textStatus) {
            },
            error: function(XMLHttpRequest, textStatus, errorThrown) {
                $('#showResult').html(ErrorMessage);
            }
        });
    }
});
//格式化字符串
function FormatData(data, id) {
    var items = data.split('$');
    var value = '';
    var text = '';
    for (var i = 0; i < items.length; i++) {

        value = items[i].substr(0, items[i].indexOf("|"));

        text = items[i].substr(items[i].indexOf("|")+1,items[i].length);

        $('#' + id).append('<option value="' + value + '">' + text + '</option>');
    }

    $('#' + id).removeAttr('disabled');
}
    </script>
    <style type="text/css">
#province{ width:90px; margin-left:5px}
#city{ width:130px; margin-left:5px}
#hometown{ width:160px; margin-left:5px}
</style>
</head>
<body>
    <form id="form1" runat="server">
    <div id="GetArea">
    <h3>这是ID为GetArea下的下拉菜单</h3>
        <select id="SelProvince" runat="server">
        </select>    
        <select id="SelCity" disabled="disabled">
            <option value="请选择城市">==请选择城市==</option>
        </select>    
        <select id="SelArea" disabled="disabled">
            <option value="请选择地区">==请选择地区==</option>
        </select><br /><br />
        获取ID为GetArea下的下拉菜单选中的值:<input id="txtArea" type="text" value="" />
        <div id="showResult">
        </div>
    </div>
    </form>
</body>
</html>

后台页ProAndCity.aspx.cs

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using System.Data.SqlClient;

public partial class ProAndCity : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{

        bindPro();
        string id = string.Empty;
        string type = string.Empty;
        if (Request["id"] != null)
        {
            id = Request["id"].ToString();//获取父类型编号()
            string sql = "select [id],[name] from n_area where [parent_id]=" + id + "";
            using (SqlConnection con = new SqlConnection("server=.;database=db_study;uid=sa;pwd=123;"))
            {
                con.Open();
                DataSet ds = new DataSet();
                SqlDataAdapter cidr = new SqlDataAdapter();
                cidr.SelectCommand = new SqlCommand(sql, con);
                cidr.Fill(ds);
                con.Close();
                string FormatStr = string.Empty;
                foreach (DataRow row in ds.Tables[0].Rows)
                {
                    FormatStr += "$" + row.ItemArray[0].ToString()+"|" + row.ItemArray[1].ToString();
                }
                FormatStr = FormatStr.Substring(1);
                Response.Write(FormatStr);
                Response.End();

            }
        }
        if (Request["type"] != null)
        {
            type = Request["type"];//获取表名称
        }


    }
    private void bindPro()
    {
        using (SqlConnection con = new SqlConnection("server=.;database=db_study;uid=sa;pwd=123;"))
        {
            con.Open();
            string sql = "select * from n_area where parent_id=0";
            SqlDataAdapter dr = new SqlDataAdapter();
            dr.SelectCommand = new SqlCommand(sql, con);
            DataSet ar = new DataSet();
            dr.Fill(ar, "pr");
            con.Close();
            SelProvince.DataSource = ar.Tables[0].DefaultView;
            SelProvince.DataTextField = "name";
            SelProvince.DataValueField = "id";
            SelProvince.DataBind();

        }
    }

}