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="添加  "onclick="AddOption($('#color1'),$('#color2'));"/></p>      <p><input name=""type="button" class="buttom1" onclick="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"onclick="tianjia('Mod_Q');">确认</button> <button class="but_01"onclick="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