Javascript select optgroup中的两个子类别，并将其值移动到另一个select

我需要在select optgroup中的两个子类别用于将它们移动到第二个select中

这就是我所拥有的：

CSS:

HTML:

备选案文1a
备选方案1b
备选案文2a
备选方案2b
备选案文1a
备选方案1b

JS:

变量$select1=$（“#度假村”）；
变量$select2=$（“#度假区_select”）；
$（“选择optgroup”）。单击（函数（e）{/*单击outgroup并自动选择子对象*/
if（$（e.target）.is（“optgroup”））{
$（this.children（“option”）.attr（“selected”、“selected”）；
}
});
/*默认情况下*/
$（文档）.ready（函数（）{
$（“#el3，#el5”）.attr（“选定”、“选定”）；
processOptions（$select1、$select2、false）；
$（“#el3，#el5”）.removeAttr（“选定”）；
});
$（[$select1，$select2]）。每个（函数（）{
$（this）.find（'optgroup'）.each（函数（idx）{
var ogId='og'+idx；
$（this.attr（'id'，ogId）；
$（this.find（'option'）。每个（函数（）{
$（this）.data（'parent'，ogId）；
});
});
});
$（'#添加'）。单击（函数（）{
processOptions（$select1、$select2、false）；
});
$（“#删除”）。单击（函数（）{
processOptions（$select2，$select1，true）；
});
var optfoundintarget={}；
函数processOptions（源、目标、变量）{
var selectedOptions=$（源）.find（'option:selected'）；
如果（选择选项长度）{
选择选项。每个选项（函数（）{
var movingFromOptGroup=$（this.parent（）；
parentOg=$（movingFromOptGroup.attr（'id'）；
if（parentOg.indexOf（“U目标”）>-1）{
parentOg=parentOg.replace（''目标'，''）；
}否则{
parentOg+=“u目标”；
}
if（optgFoundInTarget[parentOg]=“object”的类型）{
}否则{
if（target.find（'optgroup#'+parentOg.length）{
_el=target.find（'optgroup#'+parentOg）；
}否则{
_el=$（''）。附录（目标）；
}
optgFoundInTarget[parentOg]=\u el；
}
targetOptGroup=optfoundintarget[parentOg]；
if（变量）{
$（this）.data（'parent'，$（targetOptGroup）.attr（'id'））.remove（）；
}否则{
$（this）.data（'parent'，$（targetOptGroup）.attr（'id'））.clone（true）.appendTo（targetOptGroup）；
}
});
$（[source，target]）。每个（函数（）{
$（this）.find（'optgroup'）.each（函数（）{
$（this.css（'display'，$（this.find（'option'）。长度？'inline'：'none'）；
})
});
target.val（null）；
}
OrderOptGroup（）；
去除重复性（）；
}
/*消除口是心非*/
函数removeDuplicity（）{
var usedNames={}；
$（“#度假酒店_选择optgroup选项”）。每个（功能（）{
if（usedNames[$（this.attr（“id”）]））{
$（this.remove（）；
}否则{
usedNames[$（this.attr（“id”）]=$（this.attr（“id”）；
}
});
}
/*按字母顺序排序*/
函数orderOptgroups（）{
$（“#度假村选择”）。每个（功能）{
变量$select=$（此变量）；
var$groups=$select.find（“optgroup”）；
$groups.remove（）；
$groups=$groups.sort（函数（g1、g2）{
返回g1.label.localeCompare（g2.label）；
});
$select.append（$groups）；
$groups.each（函数（）{
var$group=$（此）；
var options=$group.find（“期权”）；
选项。删除（）；
options=options.sort（函数（a，b）{
返回a.innerHTML.localeCompare（b.innerHTML）；
});
$group.append（选项）；
});
});
}

现在它只适用于一个子类别。我需要它使它为两个子类工作。它的意思是：我点击“1B组”（里面的所有内容都是自动选择的），然后我按下右箭头按钮，它移动到另一个html选择，但它移动错误。因为只有“1B组”移动，但我也需要移动“1组”（父级）

.sub-sub-optgroup{
 text-indent: 15px;
}

<table cellspacing="10" cellpadding="10" border="0">
    <tr>
        <td>
            <select multiple id="resort" class="w100p" size="50">                
                <optgroup label="Group 1">
                    <option id="el1" value="1">Option 1a</option>                            
                    <!-- THIS IS WHAT I NEED -->
                    <optgroup label="Group 1B" class="sub-sub-optgroup">
                      <option id="el2" value="2">Option 1b</option>
                    </optgroup>
                    <!-- END -->
                </optgroup>
                <optgroup label="Group 2">
                    <option id="el3" value="3">Option 2a</option>
                    <option id="el4" value="4">Option 2b</option>
                </optgroup>
                <optgroup label="Group 3">
                    <option id="el5" value="5">Option 1a</option>
                    <option id="el6" value="6">Option 1b</option>
                </optgroup>  
            </select>
        </td>
        <td> 
            <input type="button" class="noarrow" id="add" value=">" /><br />
            <input type="button" class="noarrow" id="remove" value="<" />
        </td>
        <td>
            <select multiple id="resort_select" class="w100p" size="50">                        
            </select>
        </td>
    </tr>
</table>

  <script>
            var $select1 = $('#resort');
            var $select2 = $('#resort_select');

            $("select optgroup").click(function (e) { /* clicking on outgroup and automacilly select child */
                if ($(e.target).is("optgroup")) {
                    $(this).children("option").attr("selected", "selected");
                }
            });

            /* By default */
            $(document).ready(function () {
                $("#el3,#el5").attr("selected", "selected");           
                 processOptions($select1, $select2, false); 
                $("#el3,#el5").removeAttr("selected");
            });


            $([$select1, $select2]).each(function () {
                $(this).find('optgroup').each(function (idx) {
                    var ogId = 'og' + idx;
                    $(this).attr('id', ogId);
                    $(this).find('option').each(function () {
                        $(this).data('parent', ogId);
                    });
                });
            });

            $('#add').click(function () {
                processOptions($select1, $select2, false);
            });
            $('#remove').click(function () {
                processOptions($select2, $select1, true);
            });

            var optgFoundInTarget = {};

            function processOptions(source, target, variable) {
                var selectedOptions = $(source).find('option:selected');
                if (selectedOptions.length) {
                    selectedOptions.each(function () {
                        var movingFromOptGroup = $(this).parent();
                        parentOg = $(movingFromOptGroup).attr('id');
                        if (parentOg.indexOf('_target') > -1) {
                            parentOg = parentOg.replace('_target', '');
                        } else {
                            parentOg += '_target';
                        }
                        if (typeof optgFoundInTarget[parentOg] == 'object') {
                        } else {
                            if (target.find('optgroup#' + parentOg).length) {
                                _el = target.find('optgroup#' + parentOg);
                            } else {
                                _el = $('<optgroup id="' + $(movingFromOptGroup).attr('id') + '_target" label="' + $(movingFromOptGroup).attr('label') + '" />').appendTo(target);
                            }
                            optgFoundInTarget[parentOg] = _el;
                        }
                        targetOptGroup = optgFoundInTarget[parentOg];
                        if (variable) {
                            $(this).data('parent', $(targetOptGroup).attr('id')).remove(); 
                        } else {  
                            $(this).data('parent', $(targetOptGroup).attr('id')).clone(true).appendTo(targetOptGroup);
                        }
                    });
                    $([source, target]).each(function () {
                        $(this).find('optgroup').each(function () {
                            $(this).css('display', $(this).find('option').length ? 'inline' : 'none');
                        })
                    });
                    target.val(null);
                }
                orderOptgroups();
                removeDuplicity();
            }
            /* removing duplicity */
            function removeDuplicity() {
                var usedNames = {}; 
                $("#resort_select optgroup option").each(function () {
                    if (usedNames[$(this).attr("id")]) {
                        $(this).remove();
                    } else {
                        usedNames[$(this).attr("id")] = $(this).attr("id");
                    }
                });
            }
            /* sorting alphabetically */
            function orderOptgroups() {
                $("#resort_select").each(function () {
                    var $select = $(this);
                    var $groups = $select.find("optgroup");
                    $groups.remove();
                    $groups = $groups.sort(function (g1, g2) {
                        return g1.label.localeCompare(g2.label);
                    });
                    $select.append($groups);
                    $groups.each(function () {
                        var $group = $(this);
                        var options = $group.find("option");
                        options.remove();
                        options = options.sort(function (a, b) {
                            return a.innerHTML.localeCompare(b.innerHTML);
                        });
                        $group.append(options);
                    });
                });
            }

        </script>