Question

我正在尝试这样做，因为选择的选项移动到另一个选择框及其相应的optgroup标签使用下面的代码，

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

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

上面的代码在firefox中工作得非常好，但在 chrome 34.0 这个$('#SelectedFeatures option').hide();不起作用，在 chrome 37.0 中，当单击单个选项时，所有选项都会隐藏在 chrome 39.0 中，选择的选项不会显示为optgroup选项。

我的小提琴：http://jsfiddle.net/Manivasagam/f7xhbLf7/4/

如何将我的代码更改为Jquery跨浏览器兼容性？

Answer 1

如果您想要跨浏览器，

隐藏选项不正确。您应该动态插入/删除/禁用选项。

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

hide（）和show（）选择不在chrome中工作的选项

1 个答案: