Question

我有一个只有2000多个选项的精选元素。我根据同一表单中另一个选择的值更新了哪些选项。我目前使用的代码是：

var $options = $('#myOptions option');
$('#view').on('change', function() {    
  let view = $(this).val();
  if (view == 'all') {
    $options.removeProp('disabled');
  } else {
    $options.removeProp('disabled').not('option[data-view="' + view + '"]' ).prop('disabled', true);
  }
});

此代码运行良好，选项几乎可以立即在Chrome或Firefox中更新，但需要IE和Edge 10+秒。

所以我的问题是 - 这是启用或禁用大量选项的最快方法吗？如果没有，最好的方法是什么？提前谢谢。

p.s - 可能值得注意的是我使用了以下库https://silviomoreto.github.io/bootstrap-select/

Answer 1

对于任何有兴趣的人，我解决这个问题的方式相对简单。我没有让每个选项都有自己的data-view属性，而是将它们移到<optgroup>个元素中，并将其作为目标上的数据属性。

这将代码调整的html属性数量从数千个减少到超过10个。

var $optGrps = $('#myOptions optgroup');
$('#view').on('change', function() {    
    let view = $(this).val();
    if (view == 'all') {
        $optGrps.prop( 'disabled', false );
    } else {
        $optGrps.prop( 'disabled', false ).not('optgroup[data-view="' + view + '"]' ).prop('disabled', true);
   }
});

我知道这不严格回答问题启用/禁用大量选择选项的最快方法，但这是最简单，耗时最少的解决方案我能找到。

启用/禁用大量选择选项的最快方法

1 个答案: