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. A simple requestAnimationFrame example visually explained
  2. window.onload vs document.onload
  3. Getting started with localStorage vs sessionStorage in html5
  4. Making max width work in internet explorer
  5. Managing the browser navigation history using HTML 5 pushstate and popstate