Show Buttons
Share On Facebook
Share On Twitter
Share On Google Plus
Share On Linkdin
Share On Reddit
Share On Stumbleupon
Contact us
Hide Buttons

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

Ryan Sukale

Ryan is just a regular guy next door trying to manage his life and finances.

You may also like...