Hide () and show () select the option not working in chrome
I am trying to do when a selected option is moved to another select box with a matching optgroup label using below code,
My jsp:
<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>
My JQuery:
$(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();
}
});
});
The above code works very well in firefox, but in chrome 34.0 this $('#SelectedFeatures option').hide();
does not work, in chrome 37.0 all options will hide when one option is clicked, and in chrome 39.0 that the selected options are not shown as an optgroup option.
My fiddle: http://jsfiddle.net/Manivasagam/f7xhbLf7/4/
How do I change my code to be jQuery browser compatible?
+3
source to share
1 answer
Hide options are incorrect if you want to use cross browser. You have to dynamically insert / remove / disable options.
$(function() {
$("#SelectFeatures").on("click", "option", function() {
var _optgroup_index = $(this).parent().index();
var _optgroup_label = $(this).parent().attr("label");
var $optgroup = $('#SelectedFeatures optgroup[label="' + _optgroup_label + '"]');
var _option_index = $(this).index();
var _option_label = $(this).text();
var $option = $('<option data-index="' + _option_index + '"></option>').text(_option_label);
var $elements;
if ($optgroup.length === 0) {
// create new optgroup, append and reorder
$optgroup = $('<optgroup data-index="' + _optgroup_index + '" label="' + _optgroup_label + '"></optgroup>').appendTo("#SelectedFeatures");
$option.appendTo($optgroup);
$elements = $("#SelectedFeatures optgroup");
if ($elements.length > 1) {
$elements.detach().sort(function(a, b) {
return $(a).attr("data-index") - $(b).attr("data-index");
}).appendTo("#SelectedFeatures");
}
} else {
// append new option and reorder
$option.appendTo($optgroup);
$elements = $optgroup.find("option");
if ($elements.length > 1) {
$elements.detach().sort(function(a, b) {
return $(a).attr("data-index") - $(b).attr("data-index");
}).appendTo($optgroup);
}
}
$(this).prop("disabled", true);
});
$("#SelectedFeatures").on("click", "option", function() {
var _option_label = $(this).text();
$("#SelectFeatures option").filter(function() {
return $(this).text() === _option_label;
}).prop("disabled", false);
if ($(this).siblings().length === 0) {
$(this).parent().remove();
} else {
$(this).remove();
}
});
});
select {
width: 12em;
height: 24em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<select name="SelectFeatures" id="SelectFeatures" multiple="multiple">
<optgroup label="Lesson">
<option>about myself</option>
<option>about yourself</option>
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
</optgroup>
<optgroup label="Game">
<option>about my game</option>
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
</optgroup>
<optgroup label="Worksheet">
<option>content</option>
<option>content2</option>
<option>test 1</option>
<option>test 2</option>
<option>test 3</option>
</optgroup>
</select>
<select name="SelectedFeatures" id="SelectedFeatures" multiple="multiple">
</select>
+3
source to share