求无刷新，二级联动菜单的源码

混世罗汉 2008-05-27 11:03:41

求各位兄弟提供：无刷新，二级联动的源码。最好是vs.net2005的（一般用于县市联动）

以下两种源码我都要：

1、dropdownlist不绑定数据表输出，联动
2、dropdownlist 绑定数据表，联动

谢谢了！

网上找了大把，不是没用，就是没有数据表，或源码不完整。

...全文

161 14 打赏收藏转发到动态举报

写回复

用AI写文章

14 条回复

切换为时间正序

请发表友善的回复…

发表回复

Valefish 2011-02-25

打赏
举报

直接要代码的去资源里面下吧

子夜__ 2011-02-25

打赏
举报

来这个链接

网友分享

子夜__ 2011-02-25

打赏
举报

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



<!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">

var step="";//step表示是第几级的联动

//异步回调

function callServer(input,str)//step表示是第几级的联动

{

    debugger;

    step = str;

//    var arg = step + input.value; //区别是哪一个层次的回调   

    var arg=input.value;

    //删除原来的控件，在选择下拉框项时，先将该下拉框之后的所有联动控件删除

    DeleteTableCol();

    if(input.value != "0")//选择了有意义的值，在这里，下拉框里有一行是请选择，对应的value为0

    {       

        //添加联动控件

        AddTableCol();

        var context= document.getElementById("ddl"+step);

        <%= ClientScript.GetCallbackEventReference(this, "arg", "receiveServerData", "context")%>;

    }

}

//接受服务器回传的数据

function receiveServerData(_serverResult, context)

{

  context.length=0;

  //如果回调值为空，说明上一级的回调没有子集了，则删除在触发回调时添加的控件

  if(_serverResult.length == 0)

  {

      DeleteTableCol();

  }

  else

  {

      var arrData = _serverResult.split(",");

      for (var i = 0; i < arrData.length; i++)

      {

         var data = arrData[i].split("@");

         context.options[context.length] = new Option(data[1],data[0]);

       }

   }  

}



//添加列

function AddTableCol()

{

    var tr=document.getElementById("mytr");

    newtd=tr.insertCell();

    newtd.id="td"+step;

    var id = "ddl"+step;

    var i = Number(step)+1;

    newtd.innerHTML="<select id=\""+id+"\" name='mySelect' style='width:100px;' onchange='callServer(this,"+i+")'><option></option></select>"; 

    newtd.style.width="100px"; 

}



//删除列

function DeleteTableCol()

{

    var tdnum=document.getElementById("mytr").cells.length;

    var tr=document.getElementById("mytr");

    for (var i=tdnum-1; i>step; i--)

    {

        try{

            tr.deleteCell(i);

        }

        catch(e)

        {;}

    }

}

</script>

</head>

<body>

    <form id="form1" runat="server">

    <div>

        <table id="mytb">

            <tr id="mytr">

                <td><asp:DropDownList ID="ddl" runat="server" onchange="callServer(this,0)">

                    </asp:DropDownList></td>

            </tr>

        </table>

    </div>

    </form>

</body>

</html>

public partial class mytest_table_dropdownlist : System.Web.UI.Page, ICallbackEventHandler

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

        {

            ddl.DataSource = DataAccess.ExecuteSelectCommand("select id,name from mytb where parentId=0");

            this.ddl.DataTextField = "MRSName";

            this.ddl.DataValueField = "MeetingRoomSubregionID";

            this.ddl.DataBind();

            this.ddl.Items.Insert(0, new ListItem("--请选择--", "0"));

        }

    }

    private string _serverResult = ""; // 用于保存回调内容

    public void RaiseCallbackEvent(string eventArgument)

    {

        DataTable mydt = DataAccess.ExecuteSelectCommand("select  id, name from mytb where parentId=" + eventArgument + "");

        if (mydt != null)

        {

            if (mydt.Rows.Count != 0)

            {

                _serverResult = "0" + "@" + "--请选择--";

            }

            foreach (DataRow row in mydt.Rows)

            {

                if (_serverResult.Equals(string.Empty))

                {

                    _serverResult = row["id"] + "@" + row["name"].ToString();

                }

                else

                {

                    _serverResult = _serverResult + "," + row["id"] + "@" + row["name"].ToString();

                }

            }

        }

    }

    //返回数据结果

    public string GetCallbackResult()

    {

        return _serverResult;

    }

}

数据库3个字段一张表！~

id ,name,parentId

自然框架 2011-02-25

打赏
举报

这里有封装好的控件，n级联动，有源码。
http://topic.csdn.net/u/20110225/16/1aae774d-e92e-4d1f-9065-61b712063c28.html?44405

路人乙e 2008-05-27

打赏
举报

一般市、县这种联动，直接把数据写到js文件就可以了，因为它不是随时更新的，没必要每次都去数据库读取
var shi = new Array("北京","上海","郑州");
var xian = new Array(new Array("通州","密云"),new Array("崇明","青浦"),new Array("新郑","巩义"));

function load()
{
var sel = document.getElementById("sel1");
for(var i=0;i<shi.length;i++){
sel.options[i] = new Option(shi[i],shi[i]);
}
sel.options[0].selected = true;
sel.onchange = function(){chose();}
chose();
}
function chose()
{
var index = document.getElementById("sel1").selectedIndex;
var sel = document.getElementById("sel2");
sel.length = 0;
for(var i=0;i<xian[index].length;i++){
sel.options[i] = new Option(xian[index][i],xian[index][i]);
}
}

<select id=sel1></select>
<select id=sel2></select>

混世罗汉 2008-05-27

打赏
举报

再顶

HarleyTung 2008-05-27

打赏
举报

或者看 http://blog.csdn.net/emperordj/archive/2008/05/19/2459415.aspx

HarleyTung 2008-05-27

打赏
举报

area1.aspx 后台代码
if(this.Request["province"]!=null)
{
DataSet ds=new DataSet("CITY");
ds=mycourse_city_info.GetCityOfProvince(Request["province"].ToString());
XmlTextWriter writer = new XmlTextWriter(Response.OutputStream, Response.ContentEncoding);
writer.Formatting = Formatting.Indented;
writer.Indentation=4;
writer.IndentChar=' ';
ds.WriteXml(writer);
writer.Flush();
writer.Close();
Response.End();

}
完成

HarleyTung 2008-05-27

打赏
举报

由于项目里要涉及到一个注册系统，其中要实现地区管理。
为了实现地区选择不"刷新"，就想办法自己做。上网找了一些，copy到本地里，发现不能使用
问题：
第一个是原本的代码无法清空二级下拉框选项(后来直接修改 drp2.length=0 就可以清空了 )
第二个无法正确的添加下拉框选项(后来通过循环得出items[i].nodeTypedValue )

唉！网络资源仅供参考.

前台页面
<%@ Page language="c#" Codebehind="area.aspx.cs" AutoEventWireup="false" Inherits="CM_study.manage.area" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm2</title>
<meta c name="GENERATOR">
<meta c name="CODE_LANGUAGE">
<meta c name="vs_defaultClientScript">
<meta chttp://schemas.microsoft.com/intellisense/ie5">http://schemas.microsoft.com/intellisense/ie5" name="vs_targetSchema">
<script>
function load(province){
var drp2=document.getElementById("DropDownList2");
{
drp2.length=0 //清空下拉框的内容
}
var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
var oDoc = new ActiveXObject("MSXML2.DOMDocument");
oHttpReq.open("POST","area1.aspx?province="+encodeURI(province),false);
oHttpReq.send("");
result = oHttpReq.responseText;
oDoc.loadXML(result);
items = oDoc.selectNodes("//Table/city"); //用来获取 Table 下所有city节点的数组

for(var i=0;i<items.length;i++) //遍历数组,取得值,然后添加到第二级菜单里
{
var city=items[i].nodeTypedValue;
var newOption =document.createElement("OPTION");
newOption.text = city;
newOption.value = city;
drp2.options.add(newOption);
}

}
</script>
</HEAD>
<body MS_POSITI>
<form id="Form1" method="post" runat="server">
<asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList>
<asp:DropDownList id="DropDownList2" runat="server"></asp:DropDownList>
</form>
</body>
</HTML>

后台代码
绑定第一个下拉框数据源
if(!this.IsPostBack)
{
DataSet ds =mycourse_city_info.GetProvince();
DropDownList1.DataSource=ds;
this.DropDownList1.DataTextField = "province";
this.DropDownList1.DataValueField = "province";
this.DropDownList1.DataBind();
DropDownList1.Items.RemoveAt(0);
this.DropDownList1.Attributes.Add("onchange","load(this.options[this.selectedIndex].innerText)");
}

混世罗汉 2008-05-27