ASP.NET jQuery 食谱8 (动态添加内容到DropDownList)
2012-01-14 19:23
603 查看
在web应用里,我们经常需要通过其他控件的事件触发动态构造DropDownList数据内容。
在这节中,我们将会看到如何实现通过选择第一个下来框的内容来动态构造第二个下拉框的内容。
首先准备好页面代码:
View Code
主要通过jQuery的append方法动态添加内容,脚本代码如下:
最终显示效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/25/011e751e33b6b9f4697c85f0be35a80f.png)
动态添加内容还可以通过以下方式添加:
$("#ddlSecond").append($("<option></option>").val("31").html("蓝色1"));
在这节中,我们将会看到如何实现通过选择第一个下来框的内容来动态构造第二个下拉框的内容。
首先准备好页面代码:
View Code
<form id="form1" runat="server"> <div align="left"> <fieldset style="width: 350px; height: 150px"> <p> 选择颜色</p> <table cellpadding="0" cellspacing="0" border="0"> <tr> <td> </td> <td> <asp:DropDownList ID="ddlFirst" runat="server"> <asp:ListItem Value="" Text="--- 请选择 ---"></asp:ListItem> <asp:ListItem Value="1" Text="红色"></asp:ListItem> <asp:ListItem Value="2" Text="黄色"></asp:ListItem> <asp:ListItem Value="3" Text="蓝色"></asp:ListItem> </asp:DropDownList> </td> </tr> <tr> <td colspan="2"> </td> </tr> <tr> <td> </td> <td> <asp:DropDownList ID="ddlSecond" runat="server"> <asp:ListItem Value="" Text="--- 请选择 ---"></asp:ListItem> </asp:DropDownList> </td> </tr> </table> </fieldset> </div> </form>
主要通过jQuery的append方法动态添加内容,脚本代码如下:
<head runat="server"> <title>Recipe8</title> <script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function () { $("#ddlFirst").bind("change", function () { // 添加change事件 $("#ddlSecond option").remove(); // 先删除所有项,以便重新加载 $("#ddlSecond").append("<option value=''>--- 请选择 ---</option>"); if ($(this).val() == 1) { $("#ddlSecond").append("<option value='11'>红色1</option>"); $("#ddlSecond").append("<option value='12'>红色2</option>"); $("#ddlSecond").append("<option value='13'>红色3</option>"); } else if ($(this).val() == 2) { $("#ddlSecond").append("<option value='21'>黄色1</option>"); $("#ddlSecond").append("<option value='22'>黄色2</option>"); $("#ddlSecond").append("<option value='23'>黄色3</option>"); } else if ($(this).val() == 3) { $("#ddlSecond").append("<option value='31'>蓝色1</option>"); $("#ddlSecond").append("<option value='32'>蓝色2</option>"); $("#ddlSecond").append("<option value='33'>蓝色3</option>"); } }); }); </script> </head>
最终显示效果如下:
![](https://oscdn.geek-share.com/Uploads/Images/Content/202004/25/011e751e33b6b9f4697c85f0be35a80f.png)
动态添加内容还可以通过以下方式添加:
$("#ddlSecond").append($("<option></option>").val("31").html("蓝色1"));
相关文章推荐
- ASP.NET+ashx+jQuery动态添加删除表格
- asp.net DropDownList 项目动态添加
- ASP.NET jQuery 食谱7 (从DropDownList获取选择的text和value值)
- Asp.net利用Jquery动态添加表格的行数
- ASP.NET jQuery 食谱10 (动态修改hyperlink的URL值)
- 每日总结(二)C#判断输入内容为数字、Sharepoint回收应用程序池错误、Asp.Net 会发或回调参数无效、DropDownList动态绑定且设置默认选择项
- 每日总结(二)C#判断输入内容为数字、Sharepoint回收应用程序池错误、Asp.Net 会发或回调参数无效、DropDownList动态绑定且设置默认选择项
- ASP.NET jQuery 食谱5 (显示CheckBoxList成员选中的内容)
- asp.net动态添加文本框并获取内容添加到数据库中
- ASP.NET jQuery 食谱24 (通过AJAX简单实现DropDownList二级联动)
- asp.net为网页动态添加description描述信息的方法
- ASP.NET jQuery 实例5 (显示CheckBoxList成员选中的内容)
- 向 ASP.NET 网页动态添加客户端脚本
- jquery使用ajax传内容到asp.net乱码解决
- Asp.net 2.0 TreeView控件使用jQuery无刷新添加节点详细说明
- 向ASP.NET 网页动态添加客户端脚本
- ASP.NET 2.0 中动态添加 GridView 模板列的例子