zoukankan      html  css  js  c++  java
  • Ajax 下拉列表联动显示

    一般处理程序文件 代码

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

    public class Xialaliebiao : IHttpHandler {

    private MydbDataContext _Context = new MydbDataContext();
    public void ProcessRequest (HttpContext context) {
    //获取主键值
    var sprent = context.Request["sprent"];
    //查找数据ID
    var var = _Context.ChinaStates.Where(p => p.ParentAreaCode == sprent);
    //定义Item集合 为空
    string item = null;
    StringBuilder builder = new StringBuilder();//调用using System.Text; 用StringBuilder造个对象
    if(var.Count()>0)
    {
    foreach(ChinaStates data in var)
    {
    //调用集合Item 给其属性赋值
    builder.Append("<item code='" + data.AreaCode + "' name='" + data.AreaName + "'/>");
    }
    }

    //送回Xml
    item = builder.ToString();//把 item 用tostring() 全部转换成字符串
    context.Response.Write("<?xml version='1.0'?>");
    context.Response.Write("<root>");
    context.Response.Write(item);
    context.Response.Write("</root>");
    context.Response.End();
    }

    HTML界面代码 

    <title></title>
    <script src="jquery-1.8.2.min.js"></script>
    <script language="javascript">
    $(document).ready(function () {
    FillProv();
    $("#ddlProv").change(function () {
    FillCity();//城市下拉列表显示城市信息
    })
    $("#ddlCity").change(function () {
    FillCounty();//区县下拉列表显示区县信息
    })
    })
    //定义城市回调函数
    function FillProv (){
    $.ajax({
    url: "Hand/Xialaliebiao.ashx",
    data: { sprent: "0001" },//找到获取值sprent(在一般配置文件里) 0001(根据城市id)
    tpye: "POST",
    dataType: "XML",
    success: function (data) {
    $("#ddlProv").empty();//清空下拉列表信息
    var items = $(data).find("item");//掉item 集合
    for(var i=0;i<items.length;i++)//用for 给每个的赋值
    {
    var code = $(items).eq(i).attr("code");//给items里任意一个code获取属性
    var name = $(items).eq(i).attr("name");//给items里任意一个name获取属性

    var $op = $("<option value='" + code + "'>" + name + "</Option>")//找到每个省份的value值(code)给他附上名字
    $("#ddlProv").append($op);//给省份下拉列表 添加 名字
    }
    //加载完省份了。再调用加载城市就没有问题了。
    FillCity();//由于用Ajax服务器端和客户端同时运行 上面加载完了省份信息 在这里加载城市信息就不会错了

    }//sucess
    })//ajax
    }
    function FillCity() {
    var prov=$("#ddlProv").val();
    $.ajax({
    url: "Hand/Xialaliebiao.ashx",
    data: {sprent:prov},
    type: "POST",
    dataType: "XML",
    success: function (data) {
    $("#ddlCity").empty();
    var items = $(data).find("item");
    for(var i=0;i<items.length;i++)
    {
    var code = $(items).eq(i).attr("code");
    var name = $(items).eq(i).attr("name");

    var $op = $("<option value='" + code + "'>" + name + "</option>");
    $("#ddlCity").append($op);
    }
    FillCounty();//加载完城市信息 在这里掉区县信息
    }//success
    })//ajax

    }
    function FillCounty() {
    var city =$("#ddlCity").val();
    $.ajax({

    url: "Hand/Xialaliebiao.ashx",
    data: { sprent: city },
    type: "POST",
    dataType: "XML",
    success: function (data) {
    $("ddlCounty").empty();
    var items = $(data).find("item");
    for (var i = 0; i < items.length;i++)
    {
    var code = $(items).eq(i).attr("code");
    var name = $(items).eq(i).attr("name");
    var $op = $("<option value='" + code + "'>" + name + "</option>");
    $("#ddlCounty").append($op);
    }
    }//success
    })//ajax
    }
    </script>
    </head>
    <body>
    <form id="form1" runat="server">
    <div>

    <asp:DropDownList ID="ddlProv" runat="server">
    </asp:DropDownList>
    <asp:DropDownList ID="ddlCity" runat="server">
    </asp:DropDownList>
    <asp:DropDownList ID="ddlCounty" runat="server">
    </asp:DropDownList>

    </div>
    </form>

  • 相关阅读:
    SQL Server 2005中NTEXT与NVARCHAR(MAX)
    WiX安装选项开始菜单项
    Linq to SQL 查询Tips
    WCF的Message Logging 和Tracing
    Publish Server Performance Monitors with MsChart
    Pushing Data to a Silverlight Client with a WCF Duplex Service
    IronPython 2.0 发布了
    设置系统环境变量立即生效的VBS脚本
    微软网络数据包分析工具 Microsoft Network Monitor 3.2
    SQL Server 2005最新Service Pack 3
  • 原文地址:https://www.cnblogs.com/tianxuan/p/4756165.html
Copyright © 2011-2022 走看看