jQuery實現Select雙向列表(保留optgroup分組)

/html

****** 略 ******

   <div class="C_BigBox">
      <divclass="C_title"><ahref="javascript:colseId('Mod_Q')">X</a>標題XXX</div>
      <div class="C_conBox">
      <div class="center">
      <table cellpadding="0" cellspacing="0"class="Mod_Q_table">
      <tr>
      <td>
      <select class="wsclesct" id="color1" multiple="multiple">
      </select>
      </td>
      <td>
      <p><input name=""type="button" class="buttom1" value="添加  "οnclick="AddOption($('#color1'),$('#color2'));"/></p>
      <p><input name=""type="button" class="buttom1" οnclick="AddOption($('#color2'),$('#color1'));"value="刪除  "/></p>
      </td>
      <td><selectclass="wsclesct" name="color2" id="color2"multiple="multiple"></select></td>
      </tr>
      </table>
      <pstyle="text-align:center;"><buttonclass="but_01"οnclick="tianjia('Mod_Q');">確認</button> <button class="but_01"οnclick="colseId('Mod_Q');">取消</button></p>
      </div>
      </div>
   </div>

****** 略 ******
//jquery
略 * 初始化雙向列時，將兩邊列表都初始化 optgroup,關係對應（optgroup id 值 等於optionname的值）*

            var addHtml = new StringBuffer();
            var addHtml2 = new StringBuffer();
            $.each(moduleAllList,function(i, m) {

                addHtml.append('<optgroup id="ogp'+m.mmId+'" label="'+m.moduleDescription+'">');
                addHtml2.append('<optgroup id="ogp'+m.mmId+'" label="'+m.moduleDescription+'">');
                $.each(actionList,function(i, s) {
                    if(m.mmId==s.mId){
                        addHtml.append('<option id="'+s.aId+'" name="ogp'+s.mId+'">'+s.actionDescription+'</option>');
                    }
                });
                $.each(actionList_2,function(i, s) {
                    if(m.mmId==s.mId){
                        addHtml2.append('<option id="'+s.aId+'" name="ogp'+s.mId+'">'+s.actionDescription+'</option>');
                    }
                });
                addHtml.append('</optgroup>');
                addHtml2.append('</optgroup>');
            });
            $('#color1').html(addHtml.toString());
            $('#color2').html(addHtml2.toString());

略 ******************************************

function AddOption(ObjSource, ObjTarget) {
    //console.log($('#color1 optgroup:eq(0)').attr('label'));
    //var optgrop1=ObjSource.find("option:selected").parent().attr('label');
    //var opId=ObjSource.find("option:selected").parents("optgroup");
   
    //拿到選中的值放到 對面所屬的optgroup列表中。根據option name 放到對面的optgroup對象下。
    $.each(ObjSource.find("option:selected"),function(i,k){
        var ogp = $(this).attr("name");
        ObjTarget.children("#"+ogp).append(k);
    });
    ObjSource.find("option:selected").remove(); // 原列表中選中的值刪除
}

function AddAll(ObjSource, ObjTarget) {
    ObjTarget.append(ObjSource.html()); // 目標列表的HTML加上原列表的所有HTML
    ObjSource.empty(); // 原列表清空
}


//獲得select 列中所有的值
$("select[name=color2] option").each(function(){
        $(this).val();
});

總結一下對JQuery對select的操作.
自己總結的話此處省略N個字符.
參考博客：
http://www.jb51.net/article/23648.htm
http://www.cnblogs.com/as285996985/articles/1535014.html