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

在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 "));

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

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义