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

本文asp.net中js+jquery添加下拉框值和后台获取示例到此结束。是一丛秋菊,也要散发芳香;是一片秋叶,也要装点大地;是一株古柏,也要撑起蓝天;是一眼古井,也要流出清泉。谢谢大家支持!

您可能有感兴趣的文章
详解ASP.NET MVC 下拉框的传值的两种方式

MVC5下拉框绑定的方法(单选)

MVC实现下拉框联动效果(单选)

ASP .NET 可编辑输入自动匹配的下拉框

详解ASP.NET MVC之下拉框绑定四种方式