JQuery二级联动下拉框+添加移除选项

1.CSS文件代码：

     $(document).ready(function() {                //绑定Connection分类

                $.ajax({

                    type: "POST",

                    contentType: "application/json",

                    url: "aaaaaaaaaa.aspx/GetConnectionTag",

                    data: "{}",

                    dataType: 'json',

                    success: function(result) {

                         var list = eval("(" + result.d + ")");

                         var option = null;

                        $.each(list.ConnectionTag, function(i, n){

                           option = $("<option></option>");

                           option.attr("value", n.CONNECTION_TAG_ID);

                           option.attr("innerHTML", n.TAG_NAME_EN);

                           $("#Connection_Select1").append(option);

                        });

                        $("#Connection_Select1").change();

                    },

                    error:function(x, e){

                       alert("error");  

                    }

                });

               //更改分类时的事件处理

               $("#Connection_Select1").change(function(){

                    $.ajax({

                        type: "POST",

                        contentType: "application/json",

                        url: "aaaaaaaaaa.aspx/GetConnectionUser",

                        data: "{'tag_id':" + $("#Connection_Select1").val() + "}",

                        dataType: 'json',

                        success: function(result) {

                             var list = eval("(" + result.d + ")");

                             var option = null;

                             $("#Connection_Select2").empty(); //清空所有项

                            $.each(list.ConnectionUser, function(i, n){

                               option = $("<option></option>");

                               option.attr("value", n.USER_ID);

                               option.attr("innerHTML", n.USER_LOGIN_NAME);

                               $("#Connection_Select2").append(option);

                            });

                        },

                        error:function(x, e){

                           alert("error");  

                        }

                    });

               });

               //添加

               $("#btnAdd").click(function(){

                    var select2_val = $("#Connection_Select2").val();

                    if(select2_val != null){

                        $.ajax({

                            type: "POST",

                            contentType: "application/json",

                            url: "aaaaaaaaaa.aspx/GetListByUserIdString",

                            data: "{'userIdString':'" + select2_val + "'}",

                            dataType: 'json',

                            success: function(result) {

                                 var list = eval("(" + result.d + ")");

                                 var option = null;

                                 var f = null;

                                $.each(list.UserList, function(i, n){

                                   f = true;

                                   $("#Connection_Select3").find("option").each(function(){

                                        if($(this).val() == n.USER_ID){

                                            f = false;  //如果选项已存在

                                        }

                                   });

                                   if(f){

                                       option = $("<option></option>");

                                       option.attr("value", n.USER_ID);

                                       option.attr("innerHTML", n.USER_LOGIN_NAME);

                                       $("#Connection_Select3").append(option);

                                   }

                                });

                            },

                            error:function(x, e){

                               alert("error");  

                            }

                        });

                    }

               });

               //删除

               $("#btnDelete").click(function(){

                    var select3_val = $("#Connection_Select3").val();

                    if(select3_val != null){                        //object类型不能直接split，必须先转成String类型

                        var array = new String(select3_val).split(","); 

                        $.each(array, function(i){

                             $("#Connection_Select3 option[value='" + array  + "']").remove();  

                        });

                    }

               });

        });

2.ASPX页面代码：

    <table  cellpadding="2" cellspacing="0">

        <tr>

            <td align="right">

                Connection分类:

            </td>

            <td>

                <select id="Connection_Select1" style="width: 211px;">

                    <option value="0"></option>

                </select>

            </td>

            <td>

            </td>

            <td>

                Connection选中的会员:

            </td>

        </tr>

        <tr>

            <td align="right" valign="top">

                Connection待选会员:

            </td>

            <td>

                <select id="Connection_Select2" multiple="multiple" class="box">

                </select>

            </td>

            <td>

                <input id="btnAdd" type="button" value="添加>>" />

                <br />

                <input id="btnDelete" type="button" value="<<删除" />

            </td>

            <td>

                <select id="Connection_Select3" multiple="multiple" class="box">

                </select>

            </td>

        </tr>

    </table>

3.ASPX.CS后台代码：

    #region 查询Connection Tag，Jquery调用方法    /// <summary>

    /// 查询Connection Tag，Jquery调用方法

    /// </summary>

    /// <returns></returns>

    [System.Web.Services.WebMethod]

    public static string GetConnectionTag()

    {

        DataSet ds = new ConnectionBLL.Connection_TagManager().GetList(22);

        return Shundao.Common.JsonConvert.ToJson(ds.Tables[0], "ConnectionTag");

    }

    #endregion

    #region 根据Connection_Tag_id查找会员，JQuery调用方法

    /// <summary>

    /// 根据Connection_Tag_id查找会员，JQuery调用方法

    /// </summary>

    /// <param name="tag_id"></param>

    /// <returns></returns>

    [System.Web.Services.WebMethod]

    public static string GetConnectionUser(object tag_id)

    {

        DataSet ds = new ConnectionBLL.ConnectionManager().GetList(22, tag_id);

        return Shundao.Common.JsonConvert.ToJson(ds.Tables[0], "ConnectionUser");

    }

    #endregion

    #region 根据以“,”分隔的USER_ID获取用户，JQuery调用方法

    /// <summary>

    ///  根据以“,”分隔的USER_ID获取用户，JQuery调用方法

    /// </summary>

    /// <param name="userIdString"></param>

    /// <returns></returns>

    [System.Web.Services.WebMethod]

    public static string GetListByUserIdString(string userIdString)

    {

        DataSet ds = new UserBLL.UserManager().GetListByUserIdString(userIdString);

        return Shundao.Common.JsonConvert.ToJson(ds.Tables[0], "UserList");

    }

    #endregion