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

前端技术 2023/09/04 .NET
复制代码 代码如下:

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

本文地址：https://www.stayed.cn/item/11426

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案