zoukankan      html  css  js  c++  java
  • ajax实现DropDownList 联动

    方法一:

    a.aspx

    html部分

    <%@ Page Language="C#" AutoEventWireup="true" EnableEventValidation="false" CodeFile="a.aspx.cs" Inherits="ASPNET.wzh.shopDoNet.admin_a" %>

    <HTML>
      <HEAD>
      <title>a</title>
      <meta content="Microsoft Visual Studio .NET 7.1" name="GENERATOR">
      <meta content="C#" name="CODE_LANGUAGE">
      <meta content="Javascrīpt" name="vs_defaultClientscrīpt">
      <meta content="http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
      <scrīpt>
      function load(state){
      var drp2 = document.getElementById("DropDownList2");
      for(var i = 0;i<=drp2.options.length -1;i++){
      drp2.remove(i);
      }
      var ōHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
      var ōDoc = new ActiveXObject("MSXML2.DOMDocument");
      oHttpReq.open("POST", "a.aspx?state="+state, false);
      oHttpReq.send("");
      result = oHttpReq.responseText;
      oDoc.loadXML(result);
      items = oDoc.selectNodes("//CITY/Table");
      for (var item = items.nextNode(); item; item = items.nextNode()){
      var city = item.selectSingleNode("//city").nodeTypedValue;
      var newOption = document.createElement("OPTION");
      newOption.text = city;
      newOption.value = city;
      drp2.options.add(newOption);
      }
      }
      </scrīpt>
      </HEAD>
       <body MS_POSITIONING="flowLayout">
      <form id="Form1" method="post" runat="server">
      <asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList>
      <asp:DropDownList id="DropDownList2" runat="server"></asp:DropDownList>
          <asp:Button ID="Button1" runat="server" ōnClick="Button1_Click" Text="Button" />
      </form>
      </body>
      </HTML>

    cs部分

            protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    SqlConnection con = new SqlConnection("server=localhost;database=pubs;uid=sa;pwd=;");
                    SqlCommand cmd = new SqlCommand("select state from authors group by state", con);
                    con.Open();
                    SqlDataReader dr = cmd.ExecuteReader(Commandbehavīor.CloseConnection);
                    DropDownList1.DataSource = dr;
                    this.DropDownList1.DataTextField = "State";
                    this.DropDownList1.DataValueField = "State";
                    this.DropDownList1.DataBind();
                    this.DropDownList1.Attributes.Add("onchange", "load(this.options[this.selectedIndex].innerText)");
                }
            }

            protected void Button1_Click(object sender, EventArgs e)
            {
                Response.Write(DropDownList1.SelectedValue+" "+DropDownList2.SelectedValue);
            }

    b.aspx

    cs部分

        protected void Page_Load(object sender, EventArgs e)
        {
            if (this.Request["state"] != null)
            {
                string state = this.Request["state"].ToString();
                SqlConnection con = new SqlConnection("server=localhost;database=pubs;uid=sa;pwd=;");
                SqlDataAdapter da = new SqlDataAdapter("select city from authors where state = '" + state + "'", con);
                DataSet ds = new DataSet("CITY");
                da.Fill(ds);
                XmlTextWriter writer = new XmlTextWriter(Response.OutputStream, Response.ContentEncoding);
                writer.Formatting = Formatting.Indented;
                writer.Indentation = 4;
                writer.IndentChar = ' ';
                ds.WriteXml(writer);
                writer.Flush();
                Response.End();
                writer.Close();
            }
        }

      -----------------------------------------------------------------
    方法二:

    后台代码:

    using System;
    using System.Data;
    using System.Configuration;
    using System.Collections;
    using System.Web;
    using System.Web.Security;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    using System.Web.UI.WebControls.WebParts;
    using System.Web.UI.HtmlControls;
    using Microsoft.Practices.EnterpriseLibrary.Data;

    public partial class ajaxtest : System.Web.UI.Page
    {
        
    private static Database db = DatabaseFactory.CreateDatabase("mkstaffConn");
        
    private string sqlcommand = string.Empty;
        
    protected void Page_Load(object sender, EventArgs e)
        
    {
            AjaxPro.Utility.RegisterTypeForAjax(
    typeof(ajaxtest));

            
    if (!Page.IsPostBack)
            
    {
                SystemName();
                TeamList.DataSource 
    = TeamName(SystemList.SelectedValue.Trim());
                TeamList.DataTextField 
    = "name";
                TeamList.DataValueField 
    = "name";
                TeamList.DataBind();         
                SystemList.Attributes.Add(
    "onchange""GetTeamList();");
            }

        }

       
        
    private void SystemName()
        
    {
            
    try
            
    {
                sqlcommand 
    = "SELECT DISTINCT system FROM MKTeam";
                SystemList.DataSource 
    = db.ExecuteDataSet(CommandType.Text, sqlcommand).Tables[0];
                SystemList.DataTextField 
    = "system";
                SystemList.DataValueField 
    = "system";
                SystemList.DataBind();
            }

            
    catch
            

            }

        }


        [AjaxPro.AjaxMethod]
        
    /// <summary>
        
    /// ajax调用方法
        
    /// </summary>
        
    /// <param name="systemselectname"></param>

        public DataTable TeamName(string systemselectname)
        
    {
            
    try
            
    {
                sqlcommand 
    = "select name from mkteam where system='" + systemselectname + "'";
                
    return db.ExecuteDataSet(CommandType.Text, sqlcommand).Tables[0];
            }

            
    catch
            
    {
                
    return null;
            }

        }

    }
     

    前台代码:

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

    <!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" type="text/javascript">
    // <!CDATA[
    function GetTeamList()
    {
        var System
    =document.getElementById("SystemList");
        ajaxtest.TeamName(System.value,TeamCallBack);

    }


    function TeamCallBack(response)
    {
        
    if(response.value !=null)
        
    {
            var team
    =document.getElementById("TeamList");
            var dt
    =response.value;
            team.length
    =0;
            
    for(var i=0;i<dt.Rows.length;i++)
            
    {
                var team_text
    =dt.Rows[i]["name"];
                var team_value
    =dt.Rows[i]["name"];
                team.options.add(
    new Option(team_text,team_value));     
            }

            
        }
       
    }


    // ]]>
    </script>
    </head>
    <body>
        
    <form id="form1" runat="server">
        
    <div>
            
    <asp:DropDownList ID="SystemList" runat="server" Width="120px">
            
    </asp:DropDownList>
            
    <asp:DropDownList ID="TeamList" runat="server" Width="120px">
            
    </asp:DropDownList></div>
        
    </form>
    </body>
    </html>
  • 相关阅读:
    普元EOS中nui(对jquery MiniUi的封装)合并表头
    css--让箭头动起来
    在开发中说一说你最讨厌什么函数????
    前端开发学习路线
    默哀日,网页置灰,开发人员你应该掌握的
    window--环境下升级node的版本(因为低版本node运行Vue项目有问题)
    小程序--模板<template>的定义和使用
    小程序--app.js之App方法
    小程序---页面配置文件,只对自己的页面有效果
    javascript 内存模型
  • 原文地址:https://www.cnblogs.com/zhuawang/p/704248.html
Copyright © 2011-2022 走看看