how to add option with its optgroup using jquery?

Question

I have created code for add and remove option from select boxs.Its working fine but i want to add option with it's optgroup text and remove with its optgroup.Here is my fiddle http://jsfiddle.net/Manivasagam/8ybf7nke/22/

my jsp :

<div>
<select name="SelectFeatures" id="SelectFeatures" multiple="multiple"
    style="height: 315px;width:200px" onchange="Move()">
    <option>Lesson</option>
    <option value="about myself">about myself</option>
    <option>about yourself</option>
    <option>Game</option>
    <option>about me game</option>
    <option>Worksheet</option>
    <option>content</option>
    <option>content2</option>
</select>
<select name="SelectedFeatures" id="SelectedFeatures" multiple="multiple"
    style="height: 315px;width:200px" onchange="Move()">

</select>
</div> 

I am creating optgroup dynamically using below code,

var $options = $('#SelectFeatures option');

var $group = null;
$options.each(function(){
    var $option = $(this);
    var text = $option.text();
    if (text === 'Lesson' || text === 'Game' || text == 'Worksheet')
    {
        $group = $('<optgroup label="' + text + '"/>');
        $option.replaceWith($group);
    }
    else
    {
        $group.append($option);
    }
});

Someone tell me how to add and remove with its optgroup?

Answer 1

The idea is to copy all <optgroup>s and <option>s to second <select> and to show only selected options in it, hiding all others.

All selected options can be chosen by selecting only visible options.

Fiddle

HTML:

<select name="SelectFeatures" id="SelectFeatures" multiple="multiple">
    <optgroup label="Lesson">
        <option>about myself</option>
        <option>about yourself</option>
    </optgroup>
    <optgroup label="Game">
        <option>about my game</option>
    </optgroup>
    <optgroup label="Worksheet">
        <option>content</option>
        <option>content2</option>
    </optgroup>
</select>

<select name="SelectedFeatures" id="SelectedFeatures" multiple="multiple">
</select>

JS:

$(document).ready(function()
{
    $('#SelectFeatures optgroup').clone().hide().appendTo('#SelectedFeatures');
    $('#SelectedFeatures option').hide();

    $('#SelectFeatures').on('click', 'option', function()
    {
        var thisText = $(this).text();
        this.disabled = true;
        var thisGroup = $(this).parent();
        var targetGroup = $('#SelectedFeatures optgroup[label="' + thisGroup.attr('label') + '"]');
        targetGroup.show();
        targetGroup.find('option').filter(function() { return $(this).text() == thisText; }).show();
    });

    $('#SelectedFeatures').on('click', 'option', function()
    {
        var thisText = $(this).text();
        $(this).hide();
        $('#SelectFeatures option').filter(function() { return $(this).text() == thisText; }).prop('disabled', false);
        var thisGroup = $(this).parent();        
        if (thisGroup.find('option:visible').length == 0)
        {
            thisGroup.hide();
        }
    });
});

Version with options deletion:

Fiddle.

JS:

$(document).ready(function()
{    
    $('#SelectFeatures').on('click', 'option', function()
    {
        var thisText = $(this).text();
        var thisGroup = $(this).parent();
        var targetGroup = $('#SelectedFeatures optgroup[label="' + thisGroup.attr('label') + '"]');
        if (targetGroup.length == 0)
        {
            targetGroup = thisGroup.clone();
            targetGroup.find('option').remove();
            var nextGroupsText = thisGroup.nextAll().map(function() { return $(this).attr('label'); }).get();
            var inserted = false;
            $('#SelectedFeatures optgroup').each(function()
            {
                if ($.inArray($(this).attr('label'), nextGroupsText) > -1)
                {
                    targetGroup.insertBefore(this);
                    inserted = true;
                    return false;
                }
            });
            if (!inserted)
            {
                $('#SelectedFeatures').append(targetGroup);
            }
        }
        targetGroup.append($(this).clone());
        this.disabled = true;
    });

    $('#SelectedFeatures').on('click', 'option', function()
    {
        var thisText = $(this).text();
        $('#SelectFeatures option').filter(function() { return $(this).text() == thisText; }).prop('disabled', false);
        var thisGroup = $(this).parent();
        $(this).remove();
        if (thisGroup.find('option').length == 0)
        {
            thisGroup.remove();
        }
    });
});