asp.net中js+jquery添加下拉框值和后台获取

简介:                     $(function () {             $(".cg2").change(function () {                 var id = $(this).

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            $(".cg2").change(function () {
                var id = $(this).attr("id");
                var value = $(this).val();
                var newid = '#'+id.replace('_1_', '_2_');//把第一列id替换成第二列id
                //alert(newid);
                var data = "t1*v1|t2*v2|t3*v3";//后台获取的数据格式,这里用固定值了
                var datas = data.split('|');//分割成多组
                for (var i = 0; i < datas.length; i++) {
                    var d1 = datas[i].split('*');//每组分割成 显示值和真实值
                    $(newid).append("<option value=\""+d1[1]+"\">" + d1[0] + "</option>");
                    //alert(d1);
                }
               // alert(id + "|||" + value);
            });
        })
       
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>为了满足两列,任意多行。后台动态生成下拉框,还要前后列联级的需求。使用js+jquery,用服务器控件+Ajax也不行,老是选择之后就
        <asp:DropDownList ID="ddl_1_1" CssClass="cg2" runat="server">
        <asp:ListItem Text="txt1" Value="val1"></asp:ListItem>
        <asp:ListItem Text="txt1" Value="val1"></asp:ListItem>
        <asp:ListItem Text="txt1" Value="val1"></asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="ddl_2_1" runat="server">
        </asp:DropDownList><br/>
        <asp:DropDownList ID="ddl_1_2" CssClass="cg2"  runat="server">
        <asp:ListItem Text="txt2" Value="val2"></asp:ListItem>
        <asp:ListItem Text="txt2" Value="val2"></asp:ListItem>
        <asp:ListItem Text="txt2" Value="val2"></asp:ListItem>
        </asp:DropDownList>
        <asp:DropDownList ID="ddl_2_2" runat="server">
        </asp:DropDownList><br/>
        <asp:Button ID="ButtonGet" runat="server" Text="获取" onclick="ButtonGet_Click" />
        <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
    </div>
    </form>
</body>
</html>

 

//后台

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {

            }
        }

        protected void ButtonGet_Click(object sender, EventArgs e)
        {
            ///获取通过js加选择的 ddl_2_1 控件选中的值,显示在Label1上。
            Label1.Text = Request["ddl_2_1"].ToString();
        }

 

相关文章
|
1月前
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
42 3
|
22天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
30 0
|
1月前
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
12 0
|
1月前
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
14 0
|
1月前
|
JavaScript 前端开发
JavaScript三级联动jQuery写法
JavaScript三级联动jQuery写法
|
1月前
|
JavaScript 前端开发
JavaScript 树状菜单栏jQuery写法
JavaScript 树状菜单栏jQuery写法
|
1月前
|
JavaScript 前端开发 API
【前端基础篇】JavaScript之jQuery介绍
【前端基础篇】JavaScript之jQuery介绍
57 0
|
3月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
38 2
|
3月前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
39 0
|
6月前
|
JavaScript
jQuery图片延迟加载插件jQuery.lazyload
jQuery图片延迟加载插件jQuery.lazyload