ajax省市县联动


HTML代码

<form id="form1" runat="server">
  <div>
    <div id="dv">
    <table>
      <tr>
      <td><asp:DropDownList ID="ddlProvince" runat="server" onchange="ProvinceChange()"></asp:DropDownList></td>
      <td><select ID="ddlCity" runat="server" onchange="CityChange()"></select></td>
      <td><select ID="ddlArea" runat="server"></select></td>
      </tr>
    </table>
      <br />
      <asp:Button ID="Button1" runat="server" OnClick="Button1_Click1" Text="查看省市县" /></div>
  <script>
    function ProvinceChange()
    {
      var obj = document.getElementById("ddlProvince").options[document.getElementById("ddlProvince").selectedIndex];
      var city = document.getElementById("ddlCity");
      var area = document.getElementById("ddlArea");
      var strcitys = _Default.getParent(obj.value).value;
      if(strcitys.indexOf(",")>0)
      {
        city.length=0;
        city.options[0] = new Option("请选择","-1");
        area.length=0;
        area.options[0] = new Option("请选择","-1");
        var citys = strcitys.split("-");
        for(var i=0;i<citys.length;i++)
        {
          city.options[i+1] = new Option(citys[i].split(",")[0], citys[i].split(",")[1]);
        }
      }
      else
      {
        city.length=0;
        city.options[0] = new Option("请选择","-1");
      }
    }
     function CityChange()
    {
      var obj = document.getElementById("ddlCity").options[document.getElementById("ddlCity").selectedIndex];
      var city = document.getElementById("ddlArea");
      var strcitys = _Default.getParent(obj.value).value;
      if(strcitys.indexOf(",")>0)
      {
        city.length=0;
        city.options[0] = new Option("请选择","-1");
        var citys = strcitys.split("-");
        for(var i=0;i<citys.length;i++)
        {
          city.options[i+1] = new Option(citys[i].split(",")[0], citys[i].split(",")[1]);
        }
      }
      else
      {
        city.length=0;
        city.options[0] = new Option("请选择","-1");
      }
    }
  </script>
  </div>
  </form>

CS代码

public sqlDMO sqldmo = new sqlDMO();
  protected void Page_Load(object sender, EventArgs e)
  {
    if (!IsPostBack)
    {
      setProvince();
      ListItem listCity = new ListItem("请选择", "-1");
      ddlCity.Items.Insert(0, listCity);
      ListItem listArea = new ListItem("请选择", "-1");
      ddlArea.Items.Insert(0, listArea);
    }
    AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));
  }
  private void setProvince()
  {
    DataTable dtProvince = sqldmo.Query("select ass_id as id,ass_dis as name from assort where ass_name='province'");
    ddlProvince.DataSource = dtProvince;
    ddlProvince.DataTextField = "name";
    ddlProvince.DataValueField = "id";
    ddlProvince.DataBind();
    ListItem listProvince = new ListItem("请选择", "-1");
    ddlProvince.Items.Insert(0, listProvince);
  }
  [AjaxPro.AjaxMethod]
  public string getParent(string parentID)
  {
    DataTable dtCity = sqldmo.Query("select ass_id as id,ass_dis as name from assort where ass_fid='" + parentID + "'");
    string strCity = "";
    for (int i = 0; i < dtCity.Rows.Count; i++)
    {
      strCity += dtCity.Rows[i]["name"].ToString().Trim() + "," + dtCity.Rows[i]["id"].ToString().Trim() + "-";
      if (i == dtCity.Rows.Count - 1) strCity = strCity.Substring(0, strCity.Length - 1);
    }
    return strCity;
  }

本文作者:



相关阅读:
ASP实例教程:Browser Capabilities组件
css 跨浏览器实现float:center
JS:一个匹配日期的正则
jquery下实现overlay遮罩层代码
一列固定宽度布局和背景图片绝对定位的实现代码
保证asp叶面一定不会出现乱码 UTF8
ASP.NET中常用输出JS脚本的类
5款Ajax 文件上传控件
asp.net url 伪静态设置方法
JRun3.0配合IIS的安装全过程
php session和cookie使用说明
在Fedora 9下面配置ISATAP IPV6 tunnel教程
asp 通用数据库连接过程函数
javascript实例教程(21-1)
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4