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();
        }

 

相关文章
|
3月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
40 1
|
6天前
|
JavaScript 定位技术
jQuery鹰眼视图小地图定位预览插件minimap.js
这是一个jQuery小地图定位预览视图,默认左侧是页面主要内容,minimap.js的好处就是在它的右侧形成一个快速定位通道,产生一个缩小版的页面,即预览效果,可以点击并快速定位到页面的某个位置。简单实用,欢迎下载!
19 0
|
3月前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
34 2
|
3月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
20 1
|
5月前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
5月前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程
77 0
|
5月前
|
移动开发 JavaScript 前端开发
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
rem的适配方案,css文件和js文件的引入方式,特色小边框的制作,DS-Digital.ttf数字展示屏的使用方法:,自适应图片 background-size,jQuery爆bug,a和盒子居中,
|
5月前
|
JavaScript 前端开发
js,jq,jquery删除css属性
js,jq,jquery删除css属性
34 0
|
5月前
|
JavaScript 前端开发
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
杨校老师课堂之Web前端JS类库_JQuery案例[效果图与代码齐全]
35 0
|
6月前
|
JavaScript 前端开发
JavaScript-jQuery的使用 + JS的案例
JavaScript-jQuery的使用 + JS的案例
47 0