保留选项列表以供选择

Keep list of options for select

本文关键字：选择 列表 选项 保留      更新时间：2023-09-26

使用IE 10...所以我不能只是在选择中隐藏和显示选项。

如果我使用 JavaScript 函数更改时删除某些选项怎么办，bit 希望将这些已删除的选项存储在某个地方，以便如果他们再次更改以前的选择，函数将删除以前的选项并添加首先删除的旧选项。 我希望这是有道理的。

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

现在我认为我能做的是克隆第二个选择以保留所有选项，但我需要这个克隆是全局的，这样我就不会在每次函数运行时永远丢失已删除的选项。 然而，全球化是不好的。

我需要在HTML/Javascript中实现所有这些。

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

*

感谢您的任何帮助！

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

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

// 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.
  });
});
select option.hide {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="make"></select>

相关文章：