Be the first user to complete this post Login To Mark Completed

0

Add to List Add To List..(Max 5) Close Save

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. sessionStorage vs localStorage vs cookie applications
2. What are reflows and repaints and how to avoid them
3. A simple requestAnimationFrame example visually explained
4. Making max width work in internet explorer

---