Question

我已经为选择框中的添加和删除选项创建了代码。它工作正常，但我想添加选项及其optgroup文本并删除其optgroup.Here是我的小提琴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 = $（＆＃39; #SelectFeatures选项＆＃39;）;

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>复制到第二个<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();
        }
    });
});

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

1 个答案: