How to prevent a select from showing drop-down temporarily?

Question

I have a page where I have many selects that show tons of options (think of something like 75 selects with 200 hundred options each). I realize that this is ugly/bad idea/etc. To make things a bit more snappy, I only include one option by default in each select and then on the click event, I add the rest. This works fine, but there is a split-second when the select shows its drop-down that only has one option and then shows the rest a split-second later.

Is there a way to "pause" the drop-down from showing itself until after I have added the other 'option's?

Here is the code if that helps:

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

Answer 1

It looks like the only way to prevent the select from dropping down is to disable it, but in my case that would be a problem because a disabled input cannot receive a click event. So, I ended up following the solution posted here (although there are some other answers posted to this question that are interesting as well). It adds two more divs to each select and it requires one more click but the effect is clean.