Question

使用IE 10 ...所以我不能隐藏和显示选项中的选项。

如果我使用JavaScript函数删除onchange上的某些选项，请将这些删除的选项存储在某处，以便如果它们再次更改先前的选择，则该函数将删除先前的选项并添加先重新删除的旧选项。我希望这是有道理的。

我有2个选择。我的第一个选择有两个选择，基于从这个选择的任何内容，第二个选择的选项将被删除或添加。默认情况下，第二个选择中已包含所有选项。它被禁用，直到选择第一个选择。

现在我认为我可以做的是cloneNode第二个选择以保留所有选项，但我需要这个克隆是全局的，这样我每次运行时都不会永远丢失删除的选项。但是，全球性很糟糕。

我需要HTML / Javascript中的所有内容。

*我到目前为止所有尝试的功能都是获取第二个选择的所有选项并根据第二个选项的选项ID删除选项，这是第一个选择的代码过滤第二个选择。 *

感谢您的帮助！

Answer 1

IE不允许在display: none个元素上使用<option>。您必须存储选项列表，并在需要时构建选项列表。

我创建了一个简单的FilteredCollection类，它存储了一个源列表，可以返回一个过滤后的视图，而不会影响源数组。

＆＃13;

// jQuery Plugins.
(function($) {
  // Populate a select input with options.
  $.fn.populateSelect = function(items, clear) {
    if (clear) this.empty();
    this.append(items.map(function(item) { return $('<option>', item); }));
  };
}(jQuery));

// A filtered collection view.
var FilteredCollection = function(source) {
  this.source = source;
};
FilteredCollection.prototype = {
  getSource : function()        { return this.source; },
  doFilter : function(filterFn) { return this.source.filter(filterFn); }
};

// Select options.
var makes = new FilteredCollection([
  { value : "1", text : "Ford" },
  { value : "2", text : "Toyota" },
  { value : "3", text : "General Motors" },
  { value : "4", text : "Honda" },
  { value : "5", text : "Hyundai" },
  { value : "6", text : "Volkswagen" },
  { value : "7", text : "Nissan" },
  { value : "8", text : "Peugeot" }
]);

// A state flag to flip for each change.
var state = 0;

$(function() {
  // Populate selection options.
  $('#make').populateSelect(makes.getSource());
  
  $('#make').on('change', function() {
    // Hide every even-indexed select option...
    $('#make option').each(function(index, option) {
      $('#make').populateSelect(makes.doFilter(function(item, index) {
        return index % 2 === state;
      }), true);
    });

    state ^= 1 // Flip the state.
  });
});

＆＃13;

select option.hide {
  display: none;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id="make"></select>

＆＃13;

保留选项列表

1 个答案: