CODEWITHSUNDEEP
javascriptjquerygoogle-chromehtml-select
MMMMS
MMMMS

Reputation: 2201

hide() and show() select option not working in chrome

I am trying to do as selected option moves to another select box with its corresponding 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();
        }
    });
});

Above code working very fine in firefox but In chrome 34.0 this $('#SelectedFeatures option').hide(); not works, In chrome 37.0 all options will hiding when click on single option and In chrome 39.0 that selected options not shows like optgroup option.

My fiddle : http://jsfiddle.net/Manivasagam/f7xhbLf7/4/

How to change my code as Jquery cross browser compatibility?

Upvotes: 3

Views: 1970

Answers (1)

Salman Arshad
Salman Arshad

Reputation: 272146

Hiding options is incorrect if you want cross-browser. You should insert/remove/disable options dynamically.

$(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>

Upvotes: 3

Related Questions