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 rea­son, but you dont want the allow the user to select a blank value upon open­ing 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 prob­lem with doing the above is that it allows the user to select the blank option as well from the dropdown.

The ideal expe­ri­ence is to not only dis­al­low the user from select­ing that option, but also pre­vent it from being avail­able when the drop­down 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>

Ref­er­ences

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

Ryan Sukale

Ryan is a UX engineer living in San Francisco, California.

You may also like...