Occasionally there's a need to create a fancy-looking dropdown menu that involves showing and hiding all manner of things. This seems to mean the select element doesn't expand to the width of its content. This function loops through the option tags, finds the amount of letters in the longest one, grabs the document's font size, multiples those v…

Dynamically set the width of a select element based on its contents

      function sizeSelects(){
        var fs = window.getComputedStyle(document.querySelector("body"),null).getPropertyValue("font-size").slice(0,-2);
        var selects = document.querySelectorAll("select");

        for (var select = 0; select < selects.length; select++){

          var opts = selects[select].querySelectorAll("option");
          var len = 0;
          var longest = 0;

          for(var q=0; q<opts.length; q++){
            len = opts[q].textContent.length;
            len > longest ? longest = len : longest = longest;
          }

          document.querySelectorAll("select")[select].setAttribute("style", "width:" + (fs*longest) + "px");
        }
      }