ASP.NET jQuery 实例8 (动态添加内容到DropDownList)

首先准备好页面代码：复制代码代码如下: <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> 最终显示效果如下：动态添加内容还可以通过以下方式添加： $("#ddlSecond").append($("<option></option>").val("31").html("蓝色1"));

　　推荐阅读

　　JavaScript初学者应注意的七个细节小结

每种语言都有它特别的地方，对于JavaScript来说，使用var就可以声明任意类型的变量，这门脚本语言看起来很简单，然而想要写出优雅的代码却是需要不断积累经验的。本文利列举了JavaScript初学者应该注意的七个细节，>>>详细阅读

本文标题：ASP.NET jQuery 实例8 (动态添加内容到DropDownList)

地址：http://www.17bianji.com/kaifa2/JS/23695.html

1/2 1