How to show all options in a multi-select

For documentation purposes I needed to list all of the options in a multi-select. In other words, the number of lines or height of the select should be at least large enough to show every option in the select which has it’s multiple attribute enabled.

The fast fix is to use developer options to manually modify the height of the select. This works fine if you have just one select to modify, but for multiple it becomes repetitive and boring. Let’s use the JavaScript console to automate it!

The objective is to iterate over all the select tags in the current page, count the number of option tags and change the size of the select accordingly.

Step 1 is to open the developer console of the browser. In case of FireFox it’s called Web developer tools and in Chrome it’s called Developer tools. On my current system both are activated with the shortcut Ctrl + Shift + i.
Step 2 is to enter the javascript console and paste the following code:

var selects = document.getElementsByTagName('select');
for(var i = 0; i < selects.length; i++){
  var s = selects[i];
  if (s.multiple) {
    var opts = s.getElementsByTagName('option');
    s.size = Math.max(s.size, opts.length);
  }
};

All select items should now display at maximum height necessary to see all the options.

Advertisements