net + js 实现无刷新联动下拉框

C#代码

using System;
using System.Data;
using System.Configuration;
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 System.Data.OleDb;

public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            Bind();
        }
    }
    void Bind()
    {
        string sql = "select * from category";
        DataTable dt = getTable(sql);
        this.select1.Items.Clear();
        ListItem item = new ListItem("--请选择--", "-1");
        this.select1.Items.Add(item);
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            ListItem itemNew = new ListItem(dt.Rows[i]["name"].ToString(),dt.Rows[i]["id"].ToString());
            this.select1.Items.Add(itemNew);

            //种类--做双向连动就可以用到了

这个例子暂时没用..
            string script = "InitCategory('" + dt.Rows[i]["id"].ToString() + "','" + dt.Rows[i]["name"].ToString() + "');";
            Page.ClientScript.RegisterStartupScript(Page.GetType(), Guid.NewGuid().ToString(), script,true);
        }

        string sqlP = "select * from product";
        DataTable dtp = getTable(sqlP);
        this.select2.Items.Clear();
        ListItem item2 = new ListItem("--请选择--","-1");
        this.select2.Items.Add(item2);
        for (int i = 0; i < dtp.Rows.Count; i++)
        {
            DataRow row = dtp.Rows[i];
            ListItem it = new ListItem(row["pname"].ToString(),row["pid"].ToString());
            this.select2.Items.Add(it);
            string s = "InitProduct('" + row["pid"].ToString() + "','"+row["cid"].ToString()+"','" + row["pname"].ToString() + "');";
            Page.ClientScript.RegisterStartupScript(Page.GetType(), Guid.NewGuid().ToString(), s, true);
        }
    }

    DataTable getTable(string sql)
    {
        OleDbCommand cmd = new OleDbCommand(sql, getCon());
        OleDbDataAdapter da = new OleDbDataAdapter(cmd);
        DataSet ds = new DataSet();
        da.Fill(ds);
        return ds.Tables[0];

    }
    OleDbConnection getCon()
    {
        return new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Persist Security Info=False;Data Source=" + HttpContext.Current.Server.MapPath("App_Data/db2.mdb;"));
    }
}

XML/HTML代码

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

<!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 type="text/javascript">
        function $(id)
        {
            return document.getElementById(id);
        }
        //种类--做双向连动就可以用到了

这个例子暂时没用..
        function CategoryEnty()
        {
            id=null;
            pid=null;
            name=null;
        }
        var cateArray = new Array();
        function InitCategory(id,name)
        {
            var ce =new  CategoryEnty();
            ce.id=id;
            ce.pid=pid;
            ce.name=name;
            cateArray.push(ce);
        }
        //下拉框改变
        function ChangeSelect()
        {
            var sValue = $("select1").value;
            var count=0;
            $("select2").options.innerHTML="";
            $("select2").options[0]= new Option("--请选择--","-1");
            for(var i=0;i<pArray.length;i++)
            {
                if(sValue==pArray[i].cid)
                {
                     count++;
                     $("select2").options[count]= new Option(pArray[i].name,pArray[i].id);

                }
            }
        }

        //产品
        function ProductEnty()
        {
            id=null;
            cid=null;
            name=null;
        }
        var pArray = new Array();
        function InitProduct(id,cid,name)
        {
            var pe = new ProductEnty();
            pe.id=id;
            pe.cid=cid;
            pe.name=name;
            pArray.push(pe);
        }
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
       <select id="select1" runat=server onchange="ChangeSelect();"><option value="-1">--请选择--</option></select>
       <select id="select2" runat=server><option value="-1">--请选择--</option></select>
    </div>
    </form>
</body>
</html>

来源：https://www.cnblogs.com/hateyoucode/archive/2009/01/16/1376974.html

标签

js代码

下拉框