ASP.NET webform开发中基于Jquery,AJAX的三级联动

主要html代码

<select id="province">
        <option value="0">--请选择省份--</option>
    </select>
    <select id="city">
        <option value="0">--请选择城市--</option>
    </select>
    <select id="area">
        <option value="0">--请选择地区--</option>
    </select>

JQuery代码

<script type="text/javascript">
        $(document).ready(function () {
            $.post("lianxi.aspx", { file2: 1 }, function (result) {
                var province = result.split(‘|‘);
                var newoption;
                for (var i in province) {
                    newoption = new Option(province[i], province[i]);
                    $("#province")[0].options.add(newoption);
                }
            })
            $("#province").change(function () {
                $("#city")[0].options.length = 1;
                if ($("#province").val() == "0") {
                    return;
                }
                $.post("lianxi.aspx", { province: $("#province").val() }, function (result) {
                    var city = result.split(‘|‘); var newoption;
                    for (var i in city) {
                        newoption = new Option(city[i], city[i]);
                        $("#city")[0].options.add(newoption);
                    }
                })
            })
            $("#city").change(function () {
                $("#area")[0].options.length = 1;
                if ($("#city").val() == "0") {
                    return;
                }
                $.post("lianxi.aspx", { city: $("#city").val() }, function (result) {
                    var area = result.split(‘|‘); var newoption;
                    for (var i in city) {
                        newoption = new Option(area[i], area[i]);
                        $("#area")[0].options.add(newoption);
                    }
                })
            })
        })
    </script>

后台代码

 1 protected void Page_Load(object sender, EventArgs e)
 2         {
 3             if (Request.Form["file2"] != null)
 4             {
 5                 string sql = string.Format("select distinct province from proci");
 6                 DataTable dt = sqlhelper.helper.ExecuteQuery(sql);
 7                 string province = "";
 8                 for (int i = 0; i < dt.Rows.Count; i++)
 9                 {
10                     province += "|" + dt.Rows[i][0].ToString();
11                 }
12                 Response.Write(province.Substring(1));
13                 Response.End();
14             }
15             if (Request.Form["province"] != null)
16             {
17                 string province = Request.Form["province"].ToString();
18                 string sql2 = string.Format("select city from proci where province=‘{0}‘", province);
19                 DataTable dt2 = sqlhelper.helper.ExecuteQuery(sql2);
20                 string city = "";
21                 for (int j = 0; j < dt2.Rows.Count; j++)
22                 {
23                     city += "|" + dt2.Rows[j][0].ToString();
24                 }
25                 Response.Write(city.Substring(1));
26                 Response.End();
27             }
28             if (Request.Form["city"] != null)
29             {
30                 string city = Request.Form["city"].ToString();
31                 string sql2 = string.Format("select dis from abcd where city=‘{0}‘", city);
32                 DataTable dt2 = sqlhelper.helper.ExecuteQuery(sql2);
33                 string area = "";
34                 for (int j = 0; j < dt2.Rows.Count; j++)
35                 {
36                     area += "|" + dt2.Rows[j][0].ToString();
37                 }
38                 Response.Write(area.Substring(1));
39                 Response.End();
40             }
41         }
时间: 2024-11-11 07:01:28

ASP.NET webform开发中基于Jquery,AJAX的三级联动的相关文章

Jquery Ajax + php 三级联动实例

sanji.php <!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> <meta http-equiv=&quo

用jQuery,ajax,实现三级联动封装JS的文件

// JavaScript Document $(document).ready(function(e) { //找到ID=SANJI的DIV,造三个下拉扔进去 var str = "<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"; $("#sanji").html(str); //

PHP ajax 实现三级联动

在一个单独JS页面中,利用ajax实现三级联动,做成一个三级联动形式,以便于以后随时调用 JS代码: 1 $(document).ready(function(e) { 2 $("#sanji").html("<select id='sheng'></select><select id='shi'></select><select id='qu'></select>"); 3 4 //填充内容

JavaWeb开发中form、ajax提交数据Model转化

JavaWeb开发中form.ajax提交数据Model转化 问题 最近学习MongoDB数据库,作为java开发的我,当然需要做个小的web程序来测试一番了.在html中我采取ajax提交方式,因为我要模拟各种类型的数据,基础数据类型.数组.对象等.然而,最终发现了个不同的地方:Form和ajax提交数据,在HttpServletRequest中尽然参数名有所不同. 数据类型 form ajax 基础数据 para=value para=value 数组 para[]={"aaa",

整合Spring.net到asp.net网站开发中初探

整合Spring.net到asp.net网站开发中初探 http://www.veryhuo.com 2009-10-21 烈火网 投递稿件 我有话说 Spring提供了一个轻量级的用于构建企业级的应用程序的解决方案.Spring提供一致并清晰的配置并整合AOP(Aspect-Oriented Programming)至你的软件中.Spring.net最耀眼的功能是在中间层提供声明式事务管理用于构建全功能的ASP.NET框架. Spring.net是一个提供综合的基础结构用于支持企业级.Net开

ASP.NET网站开发中个人出错总结一:数据库连接

上图标记要保持一致.才正确. ASP.NET网站开发中个人出错总结一:数据库连接

JQuery+Ajax实战三级下拉列表联动(八)

本片文章为练习,项目中不会这样写: 一:涉及到的知识点: jQuery Dom操作 jQuery Ajax操作 ASP.net中的json操作 二:用了自动代码生成器 1.Dal层的代码: public static partial class BranchTwoService { /// <summary> /// 根据一级机构的ID得二级机构列表 /// </summary> /// <param name="branchOneId">1级机构I

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能

使用PHP+MySql+Ajax+jQuery实现省市区三级联动功能 要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates表查询 Ajax加载数据 1.这是chinastates表 2.做一个简单php:Ajax_eg.php <!DOCTYPE html><html>    <head>        <meta c

AJAX省市区三级联动下拉列表实现 JAVA开发

转载自:http://blog.sina.com.cn/s/blog_a48af8c001011lx1.html 例子--District Picker            http://fengyuanchen.github.io/distpicker/ 此小程序的功能主要是采用异步请求方式从数据库中调取省市区信息显示到下拉列表: 代码如下: 建立数据库中的代码和一些配置文件信息就省略了,主要有JavaScript中的代码为: $(document).ready(function(){