动态二级联动下拉菜单

CHR_WHY 2008-12-14 01:25:22

关于动态二级下拉菜单
有两个下拉菜单，第一个是选角色，第二个是选用户（有不同角色）
就是在选定了角色后，第二个下拉框的选项就是对应角色的用户
用JS如何实现
老范各位了

...全文

210 11 打赏收藏转发到动态举报

写回复

用AI写文章

11 条回复

切换为时间正序

请发表友善的回复…

发表回复

dh20156 2008-12-17

打赏
举报

参见：
EasyUS(union select) V1.0
http://www.v-ec.com/dh20156/article.asp?id=201

cloudgamer 2008-12-17

打赏
举报

可以参考这里是怎么联动的

cloudgamer 2008-12-17

打赏
举报

可以参考这里是怎么联动的

CHR_WHY 2008-12-14

打赏
举报

[Quote=引用 2 楼 lu_huanling 的回复:]
可以在刚加载画面的时侯就把所有的角色和角色对应的用户都查出来,放到一个list 中键对应的是角色的值, 值对应的是用户数组

然后当角色下拉发生了change 以后根据角色的值把下拉给赋上对应的值.
这样就可以了.

[/Quote]
就是在这个change函数上我不会写
能不能给多点提示

CHR_WHY 2008-12-14

打赏
举报

[Quote=引用 3 楼 crjjason 的回复:]
<select name="role" id="role" onchange="getUsers()">
//....
</select>
<select name="user" id="user">

</select>
在getUsers()中，根据选定的role值，去取对应的用户，然后把结果插入到表示user的select中
[/Quote]
就是在这个change函数上我不会写
能不能给多点提示

mengxj85 2008-12-14

打赏
举报



<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JavaScript_Default.aspx.cs" Inherits="JavaScript_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>.net2.0+JavaScript实现局部无刷新</title>

    <script language="javascript">

        function FillData(strCity)

        {

           document.getElementById("DropDownList1").options.length=0;

           var indexofcity;

           var city;

           //分割传递来的字符串

           while(strCity.length>0)

           {

             //判断是否是最后一个字符串

             indexofcity = strCity.indexOf(",");

             if (indexofcity > 0)

             { 

               city = strCity.substring(0,indexofcity);

               strCity = strCity.substring(indexofcity+1);

               //填充DropDownList1

               document.getElementById("DropDownList1").add(new Option(city,city));

             }

             else

             {

               document.getElementById("DropDownList1").add(new Option(strCity,strCity));

               break;

             }

           }

        }

    </script>

</head>

<body>

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

    <div>

        <div>

            <strong>

            .net2.0+JavaScript实现局部无刷新Demo<br />

            </strong>

            城市名称：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

            <%--<asp:Button ID="Button1" runat="server" Text="查 询" OnClientClick="Search()" />--%>

            <input id="Button1" type="button" value="查 询" onclick="Search()" />

            <br />

            　　城镇：<asp:DropDownList ID="DropDownList1" runat="server">

            </asp:DropDownList></div>

    

    </div>

    </form>

</body>

</html>



public partial class JavaScript_Default : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        //创建字符串连接对象

        System.Text.StringBuilder cityScript = new System.Text.StringBuilder();

        //使用字符串组织一个JavaScript脚本方法,FillData()脚本方法在客户端页面定义

        cityScript.Append("function Search() \n");

        cityScript.Append("{ var city=document.getElementById('TextBox1').value; \n");

        cityScript.Append("  switch (city) \n");

        cityScript.Append("  { case '武汉': \n");

        cityScript.Append("      FillData('" + GetCityStr("武汉") + "'); \n");

        cityScript.Append("      break; \n");

        cityScript.Append("    case '钟祥': \n");

        cityScript.Append("      FillData('"+GetCityStr("钟祥")+"'); \n");

        cityScript.Append("      break; \n");

        cityScript.Append("  } \n ");

        cityScript.Append("} \n");



        //使用注册脚本方法在页面的客户端，注册这个字符串编写的脚本方法

        Page.ClientScript.RegisterClientScriptBlock(typeof(string), "Search", cityScript.ToString(), true);

    }



    private string GetCityStr(string _city)

    {

        string strCity = null;

        switch (_city)

        {

            case "武汉":

                strCity = "武昌,汉口,洪山";

                break;

            case "钟祥":

                strCity = "郢中,胡集,双河";

                break;

            default:

                break;

        }

        return strCity;

    }

}

mengxj85 2008-12-14

打赏
举报

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="CallBack_Default.aspx.cs" Inherits="CallBack_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>使用.net回调(CallBack)技术实现局部刷新</title>

    <script language="javascript">

        function FillData()

        {

            var city = document.getElementById("TextBox1").value;

            <% =ClientScript.GetCallbackEventReference(this,"city","FillDll",null) %>;

        }

        

         function FillDll(strCity)

        {

           document.getElementById("DropDownList1").options.length = 0;

           var indexofcity;

           var city;

           //分割传递来的字符串

           while(strCity.length>0)

           {

             //判断是否是最后一个字符串

             indexofcity = strCity.indexOf(",");

             if (indexofcity > 0)

             { 

               city = strCity.substring(0,indexofcity);

               strCity = strCity.substring(indexofcity+1);

               //填充DropDownList1

               document.getElementById("DropDownList1").add(new Option(city,city));

             }

             else

             {

               document.getElementById("DropDownList1").add(new Option(strCity,strCity));

               break;

             }

           }

        }

    </script>

</head>

<body>

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

    <div>

        <strong>使用.net回调(CallBack)技术实现局部刷新</strong><br />

        城市名称：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

        <input id="Button1" type="button" value="查 询" onclick="FillData()" /><br />

        城镇：<asp:DropDownList ID="DropDownList1" runat="server">

        </asp:DropDownList></div>

    </form>

</body>

</html>

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

{

    private string _data;



    protected void Page_Load(object sender, EventArgs e)

    {



    }



    public string GetCallbackResult()

    {

        return _data;

    }



    public void RaiseCallbackEvent(string eventArgument)

    {

        switch (eventArgument)

        {

            case "武汉":

                _data = "武昌,汉口,洪山";

                break;

            case "钟祥":

                _data = "郢中,胡集,双河";

                break;

            default:

                break;

        }

    }



}

mengxj85 2008-12-14

打赏
举报

有好同个版本，一一给贴（非原创，原创作者也忘了）
-----

<%@ Page Language="C#" EnableEventValidation="false" AutoEventWireup="true" CodeFile="Ajax_Default.aspx.cs" Inherits="Ajax_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 language="javascript">

        var xmlHttp;

        function GetData()//创建异步对象

        {

            //获取城市名称

            var city = document.getElementById("TextBox1").value;

            //创建异步调用对象

            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

            //将对象状态与事件关联

            xmlHttp.onreadystatechange = StateChange;

            //加载要链接的页面(响应的页)并将参数值编码(encodeURI)

            xmlHttp.Open("POST","Ajax_Response.aspx?city="+encodeURI(city),true);

            xmlHttp.Send();

            

        }

        

        function StateChange()//异步调用的状态

        {

            //判断异步调用是否已经完成

            if (xmlHttp.readystate == 4)

            {

                //判断完成的提示代码是否是OK状态

                if (xmlHttp.status ==200)

                {

                    //将返回数据作为参数,传递给填充的方法

                    FillData(xmlHttp.responseText);

                }

            }

        }  

        

        function FillData(strCity)

        {

           document.getElementById("DropDownList1").options.length = 0;

           var indexofcity;

           var city;

           //分割传递来的字符串

           while(strCity.length>0)

           {

             //判断是否是最后一个字符串

             indexofcity = strCity.indexOf(",");

             if (indexofcity > 0)

             { 

               city = strCity.substring(0,indexofcity);

               strCity = strCity.substring(indexofcity+1);

               //填充DropDownList1

               document.getElementById("DropDownList1").add(new Option(city,city));

             }

             else

             {

                lastCity=strCity.substring(0,2);

               document.getElementById("DropDownList1").add(new Option(lastCity,lastCity));

               break;

             }

           }

        }      

        

    </script>

</head>

<body>

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

    <div>

        <strong>

        使用Ajax技术实现局部刷新</strong><br />

        城市名称：<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

        <%--<asp:Button ID="Button1" runat="server" Text="查 询" OnClientClick="GetData()" />--%>

        <input id="Button1" type="button" value="查 询" onclick="GetData()" />

        <br />

        城镇：<asp:DropDownList ID="DropDownList1" runat="server">

        </asp:DropDownList></div>

    </form>

</body>

</html>

public partial class Ajax_Show : System.Web.UI.Page

{

    protected void Page_Load(object sender, EventArgs e)

    {

        if (Request["city"] != null)

        {

            string city = Server.HtmlDecode(Request["city"]);//html解码

            Response.Clear();

            switch (city)

            {

                case "wuhan":

                    Response.Write("武昌,汉口,洪山");

                    break;

                case "钟祥":

                    Response.Write("郢中,胡集,双河");

                    break;

                default:

                    break;

            }

        }

    }

}

-----------上面这部分还有两个页面，不用说也应该知道叫什么名了吧，没有什么内容，就不贴了
还有另外几个版本

RJCHEN1985 2008-12-14

打赏
举报

<select name="role" id="role" onchange="getUsers()">
//....
</select>
<select name="user" id="user">

</select>
在getUsers()中，根据选定的role值，去取对应的用户，然后把结果插入到表示user的select中