jquery - 如何使用jquery添加选项及其optgroup？

Question

我已经创建了从选择框中添加和删除选项的代码。它工作正常，但我想用它的 optgroup 文本添加选项并用它的 optgroup 删除。这是我的 fiddle http://jsfiddle.net/Manivasagam/8ybf7nke/22/

我的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> 

我正在使用下面的代码动态创建 optgroup，

var $options = $('#SelectFeatures 选项');

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);
    }
});

有人告诉我如何使用它的 optgroup 添加和删除吗？

Answer 1

这个想法是复制所有 <optgroup>和 <option> s 到第二 <select>并仅显示其中选定的选项，隐藏所有其他选项。

可以通过仅选择可见选项来选择所有选定的选项。

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();
        }
    });
});

删除选项的版本:

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();
        }
    });
});