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

 更新时间:2014年05月15日 16:45:09   作者:  
这篇文章主要介绍了asp.net中js+jquery添加下拉框值和后台获取的具体实现,需要的朋友可以参考下
复制代码 代码如下:

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

相关文章

  • 详解在.net core中完美解决多租户分库分表的问题

    详解在.net core中完美解决多租户分库分表的问题

    这篇文章主要介绍了详解在.net core中完美解决多租户分库分表的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-04-04
  • ASP.NET Core 2.0 WebApi全局配置及日志实例

    ASP.NET Core 2.0 WebApi全局配置及日志实例

    下面小编就为大家分享一篇ASP.NET Core 2.0 WebApi全局配置及日志实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • .netcore 写快递100的快递物流信息查询接口的实现

    .netcore 写快递100的快递物流信息查询接口的实现

    这篇文章主要介绍了.netcore 写快递100的快递物流信息查询接口,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-04-04
  • asp.net获取真实ip的方法

    asp.net获取真实ip的方法

    这篇文章主要介绍了asp.net获取真实ip的方法,通过一个简单的自定义函数达到获取用户真实IP的功能,非常简单实用,需要的朋友可以参考下
    2015-07-07
  • asp.net编程获取项目根目录实现方法集合

    asp.net编程获取项目根目录实现方法集合

    这篇文章主要介绍了asp.net编程获取项目根目录实现方法,结合实例形式分析总结了asp.net针对项目目录的操作技巧与注意事项,需要的朋友可以参考下
    2015-11-11
  • Convert.ToInt32与Int32.Parse区别及Int32.TryParse

    Convert.ToInt32与Int32.Parse区别及Int32.TryParse

    2个方法都可以把string转换为int,那么他们有什么区别?什么时候该用什么?性能如何。 其实在2.0里还有Int32.TryParse也实现了同样的效果。
    2009-01-01
  • Asp.Net Core用NLog记录日志操作方法

    Asp.Net Core用NLog记录日志操作方法

    在本篇文章里小编给大家整理的是一篇关于Asp.Net Core用NLog记录日志操作方法以及相关知识点,需要的朋友们可以学习下。
    2019-10-10
  • Asp.net webForm设置允许表单提交Html的方法

    Asp.net webForm设置允许表单提交Html的方法

    下面小编就为大家分享一篇Asp.net webForm设置允许表单提交Html的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2017-12-12
  • linq中的限定操作符

    linq中的限定操作符

    这篇文章介绍了linq中的限定操作符,文中通过示例代码介绍的非常详细。对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-03-03
  • asp.net代码中修改web.config节点的具体方法

    asp.net代码中修改web.config节点的具体方法

    在有些情况下,要在代码中读取一种全局变量,把这种全局变量放在web.config是一种常见的手段。
    2013-06-06

最新评论