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.