Be the first user to complete this post

  • 0
 Add to List

Remove the blank value from a html select option dropdown

Your HTML select tag needs to show a blank value by default but for some reason, but you dont want the allow the user to select a blank value upon opening the dropdown. 

<form>
  <select>
     <option value=""></option>
     <option value="foo">Foo</option>
     <option value="bar">Bar</option>
  </select>
</form>
TLDR Here's a JSFIDDLE with the solution.
The problem with doing the above is that it allows the user to select the blank option as well from the dropdown. The ideal experience is to not only disallow the user from selecting that option, but also prevent it from being available when the dropdown is open. Here's the change you can make do achieve that 
<form>
  <select>
     <option selected disabled hidden style='display: none' value=''></option>
     <option value="foo">Foo</option>
     <option value="bar">Bar</option>
  </select>
</form>

References

http://caniuse.com/#search=hidden http://stackoverflow.com/a/18490908/226953

Also Read:

  1. What are reflows and repaints and how to avoid them
  2. pseudo elements vs pseudo classes
  3. Getting started with localStorage vs sessionStorage in html5
  4. A simple requestAnimationFrame example visually explained
  5. window.onload vs document.onload