asp.net中js+jquery添加下拉框值和后台获取示例
程序员文章站
2024-02-25 21:09:45
复制代码 代码如下:
<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();
}
复制代码 代码如下:
<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();
}