HTML select form with option to enter custom value

Question

I would like to have an input field that users can enter custom text value or choose from drop down  A regular  lt select gt  only offers drop down options   How can I make a  lt select gt  accept custom value  For instance  Ford    lt select gt     lt option value  volvo  gt Volvo lt  option gt     lt option value  saab  gt Saab lt  option gt     lt option value  mercedes  gt Mercedes lt  option gt     lt option value  audi  gt Audi lt  option gt   lt  select gt

User · Answer

You can t really  You ll have to have both the drop down  and the text box  and have them pick or fill in the form   Without javascript you could create a separate radio button set where they choose dropdown or text input  but this seems messy to me   With some javascript you could toggle disable one or the other depending on which one they choose  for instance  have an  other  option in the dropdown that triggers the text field

User · Answer

HTML5 has a built-in combo box  You create a text input and a datalist  Then you add a list attribute to the input  with a value of the id of the datalist   Update  As of March 2019 all major browsers  now including Safari 12 1 and iOS Safari 12 3  support datalist to the level needed for this functionality  See caniuse for detailed browser support   It looks like this    x000D   x000D   lt input type  text  list  cars    gt  x000D   lt datalist id  cars  gt  x000D     lt option gt Volvo lt  option gt  x000D     lt option gt Saab lt  option gt  x000D     lt option gt Mercedes lt  option gt  x000D     lt option gt Audi lt  option gt  x000D   lt  datalist gt  x000D   x000D   x000D

User · Answer

If the datalist option doesn t fulfill your requirements  take a look to the Select2 library and the  Dynamic option creation    x000D   x000D      js-example-tags   select2   x000D    tags  true x000D      x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt link href  https   cdnjs cloudflare com ajax libs select2 4 0 6-rc 0 css select2 min css  rel  stylesheet   gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs select2 4 0 6-rc 0 js select2 min js  gt  lt  script gt  x000D   x000D   x000D   lt select class  form-control js-example-tags  gt  x000D     lt option selected  selected  gt orange lt  option gt  x000D     lt option gt white lt  option gt  x000D     lt option gt purple lt  option gt  x000D   lt  select gt  x000D   x000D   x000D

User · Answer

jQuery Solution   Demo  http   jsfiddle net 69wP6 2   Another Demo Below updated    I needed something similar in a case when i had some fixed Options and i wanted one other option to be editable  In this case i made a hidden input that would overlap the select option and would be editable and used jQuery to make it all work seamlessly   I am sharing the fiddle with all of you    HTML   lt div id  billdesc  gt       lt select id  test  gt         lt option class  non  value  option1  gt Option1 lt  option gt         lt option class  non  value  option2  gt Option2 lt  option gt         lt option class  editable  value  other  gt Other lt  option gt       lt  select gt       lt input class  editOption  style  display none   gt  lt  input gt   lt  div gt    CSS  body      background  blue     billdesc      padding-top  50px     test      width  100       height  30px    option       height  30px      line-height  30px      editOption      width  90       height  24px      position  relative      top  -30px      jQuery   var initialText       editable   val        editOption   val initialText        test   change function    var selected      option selected   this  attr  class    var optionText       editable   text     if selected     editable          editOption   show            editOption   keyup function          var editText       editOption   val              editable   val editText             editable   html editText           else        editOption   hide            Edit    Added some simple touches design wise  so people can clearly see where the input ends   JS Fiddle   http   jsfiddle net 69wP6 4

User · Answer

Using one of the above solutions    mickmackusa    I made a working prototype in React 16 8  using Hooks   https   codesandbox io s heuristic-dewdney-0h2y2  I hope it helps someone

User · Answer

Alen Saqe s latest JSFiddle didn t toggle for me on Firefox  so I thought I would provide a simple html javascript workaround that will function nicely within forms  regarding submission  until the day that the datalist tag is accepted by all browsers devices   For more details and see it in action  go to  http   jsfiddle net 6nq7w 4   Note  Do not allow any spaces between toggling siblings    lt  DOCTYPE html gt   lt html gt   lt script gt  function toggleField hideObj showObj     hideObj disabled true            hideObj style display  none     showObj disabled false       showObj style display  inline     showObj focus       lt  script gt   lt body gt   lt form name  BrowserSurvey  action     gt  Browser   lt select name  browser             onchange  if this options this selectedIndex  value   customOption                  toggleField this this nextSibling                 this selectedIndex  0                gt               lt option gt  lt  option gt               lt option value  customOption  gt  type a custom value  lt  option gt               lt option gt Chrome lt  option gt               lt option gt Firefox lt  option gt               lt option gt Internet Explorer lt  option gt               lt option gt Opera lt  option gt               lt option gt Safari lt  option gt           lt  select gt  lt input name  browser  style  display none   disabled  disabled               onblur  if this value      toggleField this this previousSibling     gt   lt input type  submit  value  Submit  gt   lt  form gt   lt  body gt   lt  html gt

[html] HTML select form with option to enter custom value

Examples related to html

Examples related to forms