Reputation: 2201
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?
Upvotes: 2
Views: 4862
Reputation: 5176
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.
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:
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();
}
});
});
Upvotes: 5