jquery 省市区3级联动 回发或回调参数无效

29 篇文章 0 订阅
7 篇文章 0 订阅
<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" EnableEventValidation="false" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="club_Default" Title="无标题页" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<script type="text/javascript">
    $(document).ready(function() {
        //预先加载第一个select,加载省,看好加载的的页面Handlerprovince.ashx
        $.post('Handlerprovince.ashx', {}, function(data) { $("#ctl00_ContentPlaceHolder1_ddl_province").html(data) }, 'html');
        //当选择省的时候加载二级市,构成联动
        $("#ctl00_ContentPlaceHolder1_ddl_province").change(function() {
        $.post('Handlercity.ashx', { cartype: $(this).val() }, function(data) { $("#ctl00_ContentPlaceHolder1_ddl_city").empty().html(data) }, 'html');
        });
        //当选择二级市的时候加载区县,构成联动
        $("#ctl00_ContentPlaceHolder1_ddl_city").change(function() {
        $.post('Handlerarea.ashx', { cartype: $(this).val() }, function(data) { $("#ctl00_ContentPlaceHolder1_ddl_area").empty().html(data) }, 'html');
        });
    });
    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
    <asp:DropDownList ID="ddl_province" runat="server">
    </asp:DropDownList>
    省
    <asp:DropDownList ID="ddl_city" runat="server">
    </asp:DropDownList>市
    <asp:DropDownList ID="ddl_area" runat="server">
    </asp:DropDownList>区/县<br />
 <asp:Button ID="Button1" runat="server" Text="Button" 
        οnclick="Button1_Click" />
    <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</asp:Content>



protected void Button1_Click(object sender, EventArgs e)
    {

        this.Label1.Text = Request.Form[ddl_province.UniqueID].ToString();
        
    }

这里取出来得是value值


using System;
using System.Web;
using System.Data;
using System.Text;

public class Handlerprovince : IHttpHandler {
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        context.Response.Clear();
        DataTable dt = new DataTable();
        string sql = "select * from province order by name";
        SQLHelper.FillDataTable(sql, dt);
        StringBuilder st = new StringBuilder();
        st.Append("<option value=\"\">--请选择--</option>");
        foreach (DataRow item in dt.Rows)
        {
            st.Append("<option value=\"" + item["code"] + "\">" + item["name"] + "</option>");

        }
        context.Response.Write(st.ToString());    
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}


using System;
using System.Web;
using System.Data;
using System.Text;

public class Handlercity : IHttpHandler
{
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        context.Response.Clear();
        string provinceId = context.Request.Form[0].ToString();
        DataTable dt = new DataTable();
        string sql = "select * from city where provinceId='" + provinceId + "' order by name";
        SQLHelper.FillDataTable(sql, dt);
        StringBuilder st = new StringBuilder();
        st.Append("<option value=\"\">--请选择--</option>");
        foreach (DataRow item in dt.Rows)
        {
            st.Append("<option value=\"" + item["code"] + "\">" + item["name"] + "</option>");

        }
        context.Response.Write(st.ToString());    
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}

using System;
using System.Web;
using System.Data;
using System.Text;

public class Handlerarea : IHttpHandler
{
    
    public void ProcessRequest (HttpContext context) {
        context.Response.ContentType = "text/plain";
        context.Response.Clear();
        string cityid = context.Request.Form[0].ToString();
        DataTable dt = new DataTable();
        string sql = "select * from [area] where [cityId]='" + cityid + "' order by name";
        SQLHelper.FillDataTable(sql, dt);
        StringBuilder st = new StringBuilder();
        st.Append("<option value=\"\">--请选择--</option>");
        foreach (DataRow item in dt.Rows)
        {
            st.Append("<option value=\"" + item["code"] + "\">" + item["name"] + "</option>");

        }
        context.Response.Write(st.ToString());    
    }
 
    public bool IsReusable {
        get {
            return false;
        }
    }

}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery省市区级联是一种常见的前端技术,用于实现在选择省份后,自加载对应的城市列表,再根据选择的城市加载对应的区县列表。以下是实现该功能的一般步骤: 1. 创建HTML结构:在HTML中创建省、市、区县的下拉列表框,并为它们添加对应的id或class属性,用于后续的操作。 2. 加载省份数据:通过Ajax请求获取省份数据,可以从后端接口获取或者直接在前端定义一个省份数据数组。 3. 绑定省份数据:将获取到的省份数据绑定到省份下拉列表框中,可以使用jQuery的append()方法态添加option元素。 4. 监听省份选择事件:使用jQuery的change()方法监听省份下拉列表框的选择事件,当选择了省份后触发相应的事件。 5. 根据选择的省份加载城市数据:根据选择的省份,通过Ajax请求获取对应的城市数据。 6. 绑定城市数据:将获取到的城市数据绑定到城市下拉列表框中,可以使用jQuery的append()方法态添加option元素。 7. 监听城市选择事件:使用jQuery的change()方法监听城市下拉列表框的选择事件,当选择了城市后触发相应的事件。 8. 根据选择的城市加载区县数据:根据选择的城市,通过Ajax请求获取对应的区县数据。 9. 绑定区县数据:将获取到的区县数据绑定到区县下拉列表框中,可以使用jQuery的append()方法态添加option元素。 10. 完成二级联效果:通过以上步骤,实现了省市区三级联动的效果。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值