如何防止选择暂时显示下拉菜单？答案

【问题标题】：How to prevent a select from showing drop-down temporarily?如何防止选择暂时显示下拉菜单？
【发布时间】：2015-05-25 09:07:54
【问题描述】：

我有一个页面，其中有许多 selects 显示大量选项（想想像 75 selects 这样的东西，每个选项有 20000 个选项）。我意识到这是丑陋/坏主意/等等。为了让事情更活泼一点，我只在每个选择中默认包含一个option，然后在click 事件中添加其余的。这工作正常，但是当select 显示只有一个option 的下拉菜单时会出现一瞬间，然后稍后再显示其余部分。

有没有办法“暂停”下拉菜单的显示，直到我添加了其他“选项”？

如果有帮助，这里是代码：

$(document).on('click', 'select', function(){
  var thisJQ = $(this);
  if (thisJQ.children().length > 1) {
    return;
  }

  var values = otherOptions ; // defined elsewhere

  var optSelected = thisJQ.children('option:selected');
  var opts = [];
  values.forEach(function(obj, index){
    if (parseInt(optSelected.val(), 10) === obj["id"]) {
      return;
    }

    var opt = document.createElement('option');
    opt.appendChild(document.createTextNode(obj["desc"]));
    opt.setAttribute('value', obj["id"]);
    opts.push(opt);
  })
  thisJQ.append(opts);
});

【问题讨论】：

标签： jquery html performance user-experience

【解决方案1】：

看起来阻止select 下拉的唯一方法是禁用它，但在我的情况下，这将是一个问题，因为禁用的输入无法接收click event。所以，我最终遵循了posted here 的解决方案（尽管这个问题还有一些其他的答案也很有趣）。它为每个select 添加了两个divs，它需要再单击一次，但效果很干净。

【讨论】：