ASP.NET jQuery 食谱8 (动态添加内容到DropDownList)

在web应用里，我们经常需要通过其他控件的事件触发动态构造DropDownList数据内容。

在这节中，我们将会看到如何实现通过选择第一个下来框的内容来动态构造第二个下拉框的内容。

首先准备好页面代码：

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>
                        &nbsp;
                    </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">
                        &nbsp;
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </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"));

posted @ 2012-01-14 19:23  PyCoder  阅读(1125)  评论(1)  编辑  收藏  举报