How can I create an editable dropdownlist in HTML

Question

I d like to create a text field with a dropdown list that lets the user choose some predefined values  The user should also be able to type a new value or select a predefined one from a dropdown list  I know that I can use two widgets for that but in my app it would be more ergonomnic if it was unified in a one widget   Is there a standard widget or do I have to use a third party javascript   How about browser portability

User · Answer

ComboBox with TextBox  For Pre-defined Values as well as User-defined Values    ComboBox with TextBox  Click Here

User · Answer

The  lt select gt  tag only allows the use of predefined entries  The typical solution to your problem is to have one entry labeled  Other  and a disabled edit field   lt input type  text    Add some JavaScript to enable the edit field only when  Other  is selected   It may be possible to somehow create a dropdown that allows direct editing  but IMO that is not worth the effort  If it was  Amazon  Google or Microsoft would be doing it  -  Just get the job done with the least complicated solution  It as faster  your boss may like that  and usually easier to maintain  you may like that

User · Answer

The  lt select gt  tag only allows the use of predefined entries  The typical solution to your problem is to have one entry labeled  Other  and a disabled edit field   lt input type  text    Add some JavaScript to enable the edit field only when  Other  is selected   It may be possible to somehow create a dropdown that allows direct editing  but IMO that is not worth the effort  If it was  Amazon  Google or Microsoft would be doing it  -  Just get the job done with the least complicated solution  It as faster  your boss may like that  and usually easier to maintain  you may like that

User · Answer

A little CSS and you are done  fiddle   lt div style  position  absolute top  32px  left  430px   id  outerFilterDiv  gt   lt input name  filterTextField  type  text  id  filterTextField  tabindex  2   style  width  140px      position  absolute  top  1px  left  1px  z-index  2 border none     gt           lt div style  position  absolute   id  filterDropdownDiv  gt   lt select name  filterDropDown  id  filterDropDown  tabindex  1000      onchange  DropDownTextToBox this  filterTextField     style  position  absolute      top  0px  left  0px  z-index  1  width  165px   gt       lt option value  -1  selected  selected  disabled  disabled  gt -- Select Column Name -- lt  option gt   lt  select gt

User · Answer

I am not sure there is a way to do it automatically without javascript    What you need is something which runs on the browser side to submit your form back to the server when they user makes a selection - hence  javascript   Also  ensure you have an alternate means  i e  a submit button  for those who have javascript turned off   A good example  Combo-Box Viewer  I had even a more sophisticated combo-box yesterday  with this dhtmlxCombo   using ajax to retrieve pertinent values amongst large quantity of data

User · Answer

You can accomplish this by using the  lt datalist gt  tag in HTML5   x000D   x000D   lt input type  text  name  product  list  productName   gt       lt datalist id  productName  gt           lt option value  Pen  gt Pen lt  option gt           lt option value  Pencil  gt Pencil lt  option gt           lt option value  Paper  gt Paper lt  option gt       lt  datalist gt  x000D   x000D   x000D   If you double click on the input text in the browser a list with the defined option will appear

User · Answer

A combobox is unfortunately something that was left out of the HTML specifications   The only way to manage it  rather unfortunately  is to roll your own or use a pre-built one  This one looks quite simple  I use this one for an open-source app although unfortunately you have to pay for commercial usage

User · Answer

The  lt select gt  tag only allows the use of predefined entries  The typical solution to your problem is to have one entry labeled  Other  and a disabled edit field   lt input type  text    Add some JavaScript to enable the edit field only when  Other  is selected   It may be possible to somehow create a dropdown that allows direct editing  but IMO that is not worth the effort  If it was  Amazon  Google or Microsoft would be doing it  -  Just get the job done with the least complicated solution  It as faster  your boss may like that  and usually easier to maintain  you may like that

User · Answer

A combobox is unfortunately something that was left out of the HTML specifications   The only way to manage it  rather unfortunately  is to roll your own or use a pre-built one  This one looks quite simple  I use this one for an open-source app although unfortunately you have to pay for commercial usage

User · Answer

Simple HTML   Javascript approach without CSS  x000D   x000D  function editDropBox     x000D      var cSelect   document getElementById  changingList    x000D   x000D      var optionsSavehouse       x000D      if cSelect    null    x000D          var optionsArray   Array from cSelect options   x000D   x000D          var arrayLength   optionsArray length  x000D          for  var o   0  o  lt  arrayLength  o      x000D              var option   optionsArray o   x000D              var oVal   option value  x000D   x000D              if oVal  gt  0    x000D                  var localParams       x000D                  localParams push option text   x000D                  localParams push option value   x000D                    localParams push option selected      if needed x000D                  optionsSavehouse push localParams   x000D                x000D            x000D        x000D   x000D      var hidden      lt input id  hidden select options  type  hidden  value      JSON stringify optionsSavehouse         gt     x000D   x000D      var cSpan   document getElementById  changingSpan    x000D      if cSpan    null    x000D          cSpan innerHTML    hidden     lt input size  2  type  text  id  tempInput  name  fname  onchange  restoreDropBox    gt     x000D        x000D    x000D   x000D  function restoreDropBox     x000D      var cSpan   document getElementById  changingSpan    x000D      var cInput   document getElementById  tempInput    x000D      var hOptions   document getElementById  hidden select options    x000D   x000D      if cSpan    null    x000D   x000D          var optionsArray       x000D   x000D          if hOptions    null    x000D              optionsArray   JSON parse hOptions value   x000D            x000D   x000D          var selectList     lt select id  changingList  gt  n   x000D   x000D          var arrayLength   optionsArray length  x000D          for  var o   0  o  lt  arrayLength  o      x000D              var option   optionsArray o   x000D              selectList       lt option value      option 1       gt     option 0      lt  option gt  n    x000D            x000D   x000D          if cInput    null    x000D              selectList       lt option value  -1  selected gt     cInput value     lt  option gt  n    x000D            x000D   x000D          selectList       lt option value  -2  onclick  editDropBox    gt - Edit - lt  option gt  n lt  select gt     x000D          cSpan innerHTML   selectList  x000D        x000D    x000D   lt span id  changingSpan  gt  x000D       lt select id  changingList  gt  x000D           lt option value  1  gt Apple lt  option gt  x000D           lt option value  2  gt Banana lt  option gt  x000D           lt option value  3  gt Cherry lt  option gt  x000D           lt option value  4  gt Dewberry lt  option gt  x000D           lt option onclick  editDropBox    value  -2  gt - Edit - lt  option gt  x000D       lt  select gt  x000D   lt  span gt  x000D   x000D   x000D

User · Answer

I am not sure there is a way to do it automatically without javascript    What you need is something which runs on the browser side to submit your form back to the server when they user makes a selection - hence  javascript   Also  ensure you have an alternate means  i e  a submit button  for those who have javascript turned off   A good example  Combo-Box Viewer  I had even a more sophisticated combo-box yesterday  with this dhtmlxCombo   using ajax to retrieve pertinent values amongst large quantity of data

User · Answer

HTML doesn t have a built-in editable dropdown list or combobox  but I implemented a mostly-CSS solution in an article     You can see a full demo here but in summary  write HTML like this    lt span class  combobox withtextlist  gt     lt input value  Fruit  gt     lt span tabindex  -1  class  downarrow  gt  lt  span gt     lt select size  10  class  sticky  gt       lt option gt Apple lt  option gt       lt option gt Banana lt  option gt       lt option gt Cherry lt  option gt       lt option gt Dewberry lt  option gt     lt  select gt   lt  span gt    And use CSS like this to style it  this is designed for both comboboxes  which have a down-arrow   button  and dropdown menus which open when clicked and may be styled differently       ------------------------------------------       ----- combobox   dropdown list styling           ------------------------------------------     combobox        Border slightly darker than Chrome s  lt select gt   slightly lighter than FireFox s      border  1px solid  999    padding-right  1 25em     leave room for         dropdown   combobox          relative  and  inline-block   or just  block   are needed      here so that  absolute  works correctly in children      position  relative    display  inline-block     combobox  gt   downarrow   dropdown  gt   downarrow          Outside normal flow  relative to container      display  inline-block    position  absolute    top  0    bottom  0    right  0    width  1 25em     cursor  default    nav-index  -1     nonfunctional in most browsers       border-width  0px              disable by default      border-style  inherit     copy parent border      border-color  inherit     copy parent border         Add a divider before the   down arrow in non-dropdown comboboxes     combobox not  dropdown   gt   downarrow     border-left-width  1px       Auto-down-arrow if one is not provided     downarrow empty  before     content          downarrow  before   downarrow  gt    only-child     text-align  center        vertical centering trick      position  relative    top  50     display  block     transform requires block inline-block      transform  translateY -50       combobox  gt  input     border  0    dropdown  gt    last-child   combobox  gt    last-child        Using  display block  here has two desirable effects        1  Accessibility  it lets input widgets in the dropdown to          be selected with the tab key when the dropdown is closed         2  It lets the opacity transition work       But it also makes the contents visible  which is undesirable       before the list drops down  To compensate  use  opacity  0       and disable mouse pointer events  Another side effect is that      the user can select and copy the contents of the hidden list       but don t worry  the selected content is invisible       display  block    opacity  0    pointer-events  none     transition  0 4s     fade out      position  absolute    left  0    top  100     border  1px solid  888    background-color   fff    box-shadow  1px 2px 4px 1px  666    box-shadow  1px 2px 4px 1px  4448    z-index  9999    min-width  100     box-sizing  border-box       List of situations in which to show the dropdown list     - Focus dropdown or non-last child of it   gt  show last-child    - Focus  downarrow of combobox   gt  show last-child    - Stay open for focus in last child  unless  less-sticky    -  sticky last child stays open on hover    -  less-sticky stays open on hover  ignores focus in last-child     dropdown focus  gt    last-child   dropdown  gt    focus     last-child   combobox  gt   downarrow focus     last-child   combobox  gt   sticky last-child hover   dropdown  gt   sticky last-child hover   combobox  gt   less-sticky last-child hover   dropdown  gt   less-sticky last-child hover   combobox  gt    last-child focus not  less-sticky    dropdown  gt    last-child focus not  less-sticky      display  block    opacity  1    transition  0 15s    pointer-events  auto       focus-within not supported by Edge IE  Unsupported selectors cause     the entire block to be ignored  so we must repeat all styles for     focus-within separately      combobox  gt    last-child focus-within not  less-sticky    dropdown  gt    last-child focus-within not  less-sticky      display  block    opacity  1    transition  0 15s    pointer-events  auto       detect Edge IE and behave if though less-sticky is on for all    dropdowns  otherwise links won t be clickable      supports  -ms-ime-align auto       dropdown  gt    last-child hover       display  block      opacity  1      pointer-events  auto           detect IE and do the same thing      media all and  -ms-high-contrast  none    -ms-high-contrast  active       dropdown  gt    last-child hover       display  block      opacity  1      pointer-events  auto         dropdown not  sticky   gt    not  last-child  focus   downarrow focus   dropdown focus     pointer-events  none     Causes second click to close       downarrow focus     outline  2px solid  8BF     Edge IE can t do outline transparency      outline  2px solid  48F8        ----------------------------------------------       Optional extra styling for combobox   dropdown       ----------------------------------------------         before    after        See https   css-tricks com international-box-sizing-awareness-day       box-sizing  border-box      combobox  gt    first-child     display  inline-block    width  100     box-sizing  border-box     so 100  includes border  amp  padding           combobox focus-within   outline       doesn t work properly     in Firefox because the focus box is expanded to include the      possibly hidden  drop list  As a workaround  put focus box on     the focused child  It is barely-visible so that it doesn t look    TOO ugly if the child isn t the same size as the parent  It    may be uglier if the first child is not styled as width 100      combobox  gt    not  last-child  focus     outline  2px solid  48F8     combobox     margin  5px       You also need some JavaScript to synchronize the list with the textbox   function parentComboBox el        for  el   el parentNode  el    null  amp  amp  Array prototype indexOf call el classList   combobox    lt   -1           el   el parentNode      return el       Uses jQuery     combobox withtextlist  gt  select   change function        var textbox   parentComboBox this  firstElementChild    textbox value   this this selectedIndex  text          combobox withtextlist  gt  select   keypress function e      if  e keyCode    13     Enter pressed     parentComboBox this  firstElementChild focus       Closes the popup

User · Answer

The  lt select gt  tag only allows the use of predefined entries  The typical solution to your problem is to have one entry labeled  Other  and a disabled edit field   lt input type  text    Add some JavaScript to enable the edit field only when  Other  is selected   It may be possible to somehow create a dropdown that allows direct editing  but IMO that is not worth the effort  If it was  Amazon  Google or Microsoft would be doing it  -  Just get the job done with the least complicated solution  It as faster  your boss may like that  and usually easier to maintain  you may like that

User · Answer

Very simple implementation  only basic functionality  based on CSS and one line of JavaScript code   x000D   x000D   dropdown     position  relative    width  200px      dropdown select     width  100       dropdown  gt        box-sizing  border-box    height  1 5em      dropdown input     position  absolute    width  calc 100  - 20px     x000D   lt div class  dropdown  gt     lt input type  text    gt     lt select  onchange  this previousElementSibling value this value  this previousElementSibling focus    gt       lt option gt This is option 1 lt  option gt       lt option gt Option 2 lt  option gt     lt  select gt   lt  div gt  x000D   x000D   x000D   Please note  it uses previousElementSibling   which is not supported in older browsers  below IE9

User · Answer

The best way to do this is probably to use a third party library   There s an implementation of what you re looking for in jQuery UI jQuery UI and in dojo dojo  jQuery is more popular  but dojo allows you to declaratively define widgets in HTML  which sounds more like what you re looking for    Which one you use will depend on your style  but both are developed for cross browser work  and both will be updated more often than copy and paste code

User · Answer

I am not sure there is a way to do it automatically without javascript    What you need is something which runs on the browser side to submit your form back to the server when they user makes a selection - hence  javascript   Also  ensure you have an alternate means  i e  a submit button  for those who have javascript turned off   A good example  Combo-Box Viewer  I had even a more sophisticated combo-box yesterday  with this dhtmlxCombo   using ajax to retrieve pertinent values amongst large quantity of data

User · Answer

I am not sure there is a way to do it automatically without javascript    What you need is something which runs on the browser side to submit your form back to the server when they user makes a selection - hence  javascript   Also  ensure you have an alternate means  i e  a submit button  for those who have javascript turned off   A good example  Combo-Box Viewer  I had even a more sophisticated combo-box yesterday  with this dhtmlxCombo   using ajax to retrieve pertinent values amongst large quantity of data

User · Answer

The best way to do this is probably to use a third party library   There s an implementation of what you re looking for in jQuery UI jQuery UI and in dojo dojo  jQuery is more popular  but dojo allows you to declaratively define widgets in HTML  which sounds more like what you re looking for    Which one you use will depend on your style  but both are developed for cross browser work  and both will be updated more often than copy and paste code

User · Answer

You can accomplish this by using the  lt datalist gt  tag in HTML5   x000D   x000D   lt input type  text  name  product  list  productName   gt       lt datalist id  productName  gt           lt option value  Pen  gt Pen lt  option gt           lt option value  Pencil  gt Pencil lt  option gt           lt option value  Paper  gt Paper lt  option gt       lt  datalist gt  x000D   x000D   x000D   If you double click on the input text in the browser a list with the defined option will appear

User · Answer

A little CSS and you are done  fiddle   lt div style  position  absolute top  32px  left  430px   id  outerFilterDiv  gt   lt input name  filterTextField  type  text  id  filterTextField  tabindex  2   style  width  140px      position  absolute  top  1px  left  1px  z-index  2 border none     gt           lt div style  position  absolute   id  filterDropdownDiv  gt   lt select name  filterDropDown  id  filterDropDown  tabindex  1000      onchange  DropDownTextToBox this  filterTextField     style  position  absolute      top  0px  left  0px  z-index  1  width  165px   gt       lt option value  -1  selected  selected  disabled  disabled  gt -- Select Column Name -- lt  option gt   lt  select gt

User · Answer

Simple HTML   Javascript approach without CSS  x000D   x000D  function editDropBox     x000D      var cSelect   document getElementById  changingList    x000D   x000D      var optionsSavehouse       x000D      if cSelect    null    x000D          var optionsArray   Array from cSelect options   x000D   x000D          var arrayLength   optionsArray length  x000D          for  var o   0  o  lt  arrayLength  o      x000D              var option   optionsArray o   x000D              var oVal   option value  x000D   x000D              if oVal  gt  0    x000D                  var localParams       x000D                  localParams push option text   x000D                  localParams push option value   x000D                    localParams push option selected      if needed x000D                  optionsSavehouse push localParams   x000D                x000D            x000D        x000D   x000D      var hidden      lt input id  hidden select options  type  hidden  value      JSON stringify optionsSavehouse         gt     x000D   x000D      var cSpan   document getElementById  changingSpan    x000D      if cSpan    null    x000D          cSpan innerHTML    hidden     lt input size  2  type  text  id  tempInput  name  fname  onchange  restoreDropBox    gt     x000D        x000D    x000D   x000D  function restoreDropBox     x000D      var cSpan   document getElementById  changingSpan    x000D      var cInput   document getElementById  tempInput    x000D      var hOptions   document getElementById  hidden select options    x000D   x000D      if cSpan    null    x000D   x000D          var optionsArray       x000D   x000D          if hOptions    null    x000D              optionsArray   JSON parse hOptions value   x000D            x000D   x000D          var selectList     lt select id  changingList  gt  n   x000D   x000D          var arrayLength   optionsArray length  x000D          for  var o   0  o  lt  arrayLength  o      x000D              var option   optionsArray o   x000D              selectList       lt option value      option 1       gt     option 0      lt  option gt  n    x000D            x000D   x000D          if cInput    null    x000D              selectList       lt option value  -1  selected gt     cInput value     lt  option gt  n    x000D            x000D   x000D          selectList       lt option value  -2  onclick  editDropBox    gt - Edit - lt  option gt  n lt  select gt     x000D          cSpan innerHTML   selectList  x000D        x000D    x000D   lt span id  changingSpan  gt  x000D       lt select id  changingList  gt  x000D           lt option value  1  gt Apple lt  option gt  x000D           lt option value  2  gt Banana lt  option gt  x000D           lt option value  3  gt Cherry lt  option gt  x000D           lt option value  4  gt Dewberry lt  option gt  x000D           lt option onclick  editDropBox    value  -2  gt - Edit - lt  option gt  x000D       lt  select gt  x000D   lt  span gt  x000D   x000D   x000D

User · Answer

HTML doesn t have a built-in editable dropdown list or combobox  but I implemented a mostly-CSS solution in an article     You can see a full demo here but in summary  write HTML like this    lt span class  combobox withtextlist  gt     lt input value  Fruit  gt     lt span tabindex  -1  class  downarrow  gt  lt  span gt     lt select size  10  class  sticky  gt       lt option gt Apple lt  option gt       lt option gt Banana lt  option gt       lt option gt Cherry lt  option gt       lt option gt Dewberry lt  option gt     lt  select gt   lt  span gt    And use CSS like this to style it  this is designed for both comboboxes  which have a down-arrow   button  and dropdown menus which open when clicked and may be styled differently       ------------------------------------------       ----- combobox   dropdown list styling           ------------------------------------------     combobox        Border slightly darker than Chrome s  lt select gt   slightly lighter than FireFox s      border  1px solid  999    padding-right  1 25em     leave room for         dropdown   combobox          relative  and  inline-block   or just  block   are needed      here so that  absolute  works correctly in children      position  relative    display  inline-block     combobox  gt   downarrow   dropdown  gt   downarrow          Outside normal flow  relative to container      display  inline-block    position  absolute    top  0    bottom  0    right  0    width  1 25em     cursor  default    nav-index  -1     nonfunctional in most browsers       border-width  0px              disable by default      border-style  inherit     copy parent border      border-color  inherit     copy parent border         Add a divider before the   down arrow in non-dropdown comboboxes     combobox not  dropdown   gt   downarrow     border-left-width  1px       Auto-down-arrow if one is not provided     downarrow empty  before     content          downarrow  before   downarrow  gt    only-child     text-align  center        vertical centering trick      position  relative    top  50     display  block     transform requires block inline-block      transform  translateY -50       combobox  gt  input     border  0    dropdown  gt    last-child   combobox  gt    last-child        Using  display block  here has two desirable effects        1  Accessibility  it lets input widgets in the dropdown to          be selected with the tab key when the dropdown is closed         2  It lets the opacity transition work       But it also makes the contents visible  which is undesirable       before the list drops down  To compensate  use  opacity  0       and disable mouse pointer events  Another side effect is that      the user can select and copy the contents of the hidden list       but don t worry  the selected content is invisible       display  block    opacity  0    pointer-events  none     transition  0 4s     fade out      position  absolute    left  0    top  100     border  1px solid  888    background-color   fff    box-shadow  1px 2px 4px 1px  666    box-shadow  1px 2px 4px 1px  4448    z-index  9999    min-width  100     box-sizing  border-box       List of situations in which to show the dropdown list     - Focus dropdown or non-last child of it   gt  show last-child    - Focus  downarrow of combobox   gt  show last-child    - Stay open for focus in last child  unless  less-sticky    -  sticky last child stays open on hover    -  less-sticky stays open on hover  ignores focus in last-child     dropdown focus  gt    last-child   dropdown  gt    focus     last-child   combobox  gt   downarrow focus     last-child   combobox  gt   sticky last-child hover   dropdown  gt   sticky last-child hover   combobox  gt   less-sticky last-child hover   dropdown  gt   less-sticky last-child hover   combobox  gt    last-child focus not  less-sticky    dropdown  gt    last-child focus not  less-sticky      display  block    opacity  1    transition  0 15s    pointer-events  auto       focus-within not supported by Edge IE  Unsupported selectors cause     the entire block to be ignored  so we must repeat all styles for     focus-within separately      combobox  gt    last-child focus-within not  less-sticky    dropdown  gt    last-child focus-within not  less-sticky      display  block    opacity  1    transition  0 15s    pointer-events  auto       detect Edge IE and behave if though less-sticky is on for all    dropdowns  otherwise links won t be clickable      supports  -ms-ime-align auto       dropdown  gt    last-child hover       display  block      opacity  1      pointer-events  auto           detect IE and do the same thing      media all and  -ms-high-contrast  none    -ms-high-contrast  active       dropdown  gt    last-child hover       display  block      opacity  1      pointer-events  auto         dropdown not  sticky   gt    not  last-child  focus   downarrow focus   dropdown focus     pointer-events  none     Causes second click to close       downarrow focus     outline  2px solid  8BF     Edge IE can t do outline transparency      outline  2px solid  48F8        ----------------------------------------------       Optional extra styling for combobox   dropdown       ----------------------------------------------         before    after        See https   css-tricks com international-box-sizing-awareness-day       box-sizing  border-box      combobox  gt    first-child     display  inline-block    width  100     box-sizing  border-box     so 100  includes border  amp  padding           combobox focus-within   outline       doesn t work properly     in Firefox because the focus box is expanded to include the      possibly hidden  drop list  As a workaround  put focus box on     the focused child  It is barely-visible so that it doesn t look    TOO ugly if the child isn t the same size as the parent  It    may be uglier if the first child is not styled as width 100      combobox  gt    not  last-child  focus     outline  2px solid  48F8     combobox     margin  5px       You also need some JavaScript to synchronize the list with the textbox   function parentComboBox el        for  el   el parentNode  el    null  amp  amp  Array prototype indexOf call el classList   combobox    lt   -1           el   el parentNode      return el       Uses jQuery     combobox withtextlist  gt  select   change function        var textbox   parentComboBox this  firstElementChild    textbox value   this this selectedIndex  text          combobox withtextlist  gt  select   keypress function e      if  e keyCode    13     Enter pressed     parentComboBox this  firstElementChild focus       Closes the popup

User · Answer

A combobox is unfortunately something that was left out of the HTML specifications   The only way to manage it  rather unfortunately  is to roll your own or use a pre-built one  This one looks quite simple  I use this one for an open-source app although unfortunately you have to pay for commercial usage

User · Answer

This can be achieved with the help of plain HTML  CSS and JQuery  I have created a sample page     x000D   x000D    document  ready function    x000D      x000D          editableBox   change function             x000D              timeTextBox   val     editableBox option selected   html     x000D          x000D      x000D   editableBox   x000D      width  75px  x000D      height  30px  x000D    x000D   x000D   timeTextBox   x000D      width  54px  x000D      margin-left  -78px  x000D      height  25px  x000D      border  none  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  wrapper  gt  x000D       lt select class  editableBox  gt          x000D           lt option value  1  gt 01 00 lt  option gt  x000D           lt option value  2  gt 02 00 lt  option gt  x000D           lt option value  3  gt 03 00 lt  option gt  x000D           lt option value  4  gt 04 00 lt  option gt  x000D           lt option value  5  gt 05 00 lt  option gt  x000D           lt option value  6  gt 06 00 lt  option gt  x000D           lt option value  7  gt 07 00 lt  option gt  x000D           lt option value  8  gt 08 00 lt  option gt  x000D           lt option value  9  gt 09 00 lt  option gt  x000D           lt option value  10  gt 10 00 lt  option gt  x000D           lt option value  11  gt 11 00 lt  option gt  x000D           lt option value  12  gt 12 00 lt  option gt  x000D           lt option value  13  gt 13 00 lt  option gt  x000D           lt option value  14  gt 14 00 lt  option gt  x000D           lt option value  15  gt 15 00 lt  option gt  x000D           lt option value  16  gt 16 00 lt  option gt  x000D           lt option value  17  gt 17 00 lt  option gt  x000D           lt option value  18  gt 18 00 lt  option gt  x000D           lt option value  19  gt 19 00 lt  option gt  x000D           lt option value  20  gt 20 00 lt  option gt  x000D           lt option value  21  gt 21 00 lt  option gt  x000D           lt option value  22  gt 22 00 lt  option gt  x000D           lt option value  23  gt 23 00 lt  option gt  x000D           lt option value  24  gt 24 00 lt  option gt  x000D       lt  select gt  x000D       lt input class  timeTextBox  name  timebox  maxlength  5   gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

A combobox is unfortunately something that was left out of the HTML specifications   The only way to manage it  rather unfortunately  is to roll your own or use a pre-built one  This one looks quite simple  I use this one for an open-source app although unfortunately you have to pay for commercial usage

User · Answer

The best way to do this is probably to use a third party library   There s an implementation of what you re looking for in jQuery UI jQuery UI and in dojo dojo  jQuery is more popular  but dojo allows you to declaratively define widgets in HTML  which sounds more like what you re looking for    Which one you use will depend on your style  but both are developed for cross browser work  and both will be updated more often than copy and paste code

User · Answer

This can be achieved with the help of plain HTML  CSS and JQuery  I have created a sample page     x000D   x000D    document  ready function    x000D      x000D          editableBox   change function             x000D              timeTextBox   val     editableBox option selected   html     x000D          x000D      x000D   editableBox   x000D      width  75px  x000D      height  30px  x000D    x000D   x000D   timeTextBox   x000D      width  54px  x000D      margin-left  -78px  x000D      height  25px  x000D      border  none  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  wrapper  gt  x000D       lt select class  editableBox  gt          x000D           lt option value  1  gt 01 00 lt  option gt  x000D           lt option value  2  gt 02 00 lt  option gt  x000D           lt option value  3  gt 03 00 lt  option gt  x000D           lt option value  4  gt 04 00 lt  option gt  x000D           lt option value  5  gt 05 00 lt  option gt  x000D           lt option value  6  gt 06 00 lt  option gt  x000D           lt option value  7  gt 07 00 lt  option gt  x000D           lt option value  8  gt 08 00 lt  option gt  x000D           lt option value  9  gt 09 00 lt  option gt  x000D           lt option value  10  gt 10 00 lt  option gt  x000D           lt option value  11  gt 11 00 lt  option gt  x000D           lt option value  12  gt 12 00 lt  option gt  x000D           lt option value  13  gt 13 00 lt  option gt  x000D           lt option value  14  gt 14 00 lt  option gt  x000D           lt option value  15  gt 15 00 lt  option gt  x000D           lt option value  16  gt 16 00 lt  option gt  x000D           lt option value  17  gt 17 00 lt  option gt  x000D           lt option value  18  gt 18 00 lt  option gt  x000D           lt option value  19  gt 19 00 lt  option gt  x000D           lt option value  20  gt 20 00 lt  option gt  x000D           lt option value  21  gt 21 00 lt  option gt  x000D           lt option value  22  gt 22 00 lt  option gt  x000D           lt option value  23  gt 23 00 lt  option gt  x000D           lt option value  24  gt 24 00 lt  option gt  x000D       lt  select gt  x000D       lt input class  timeTextBox  name  timebox  maxlength  5   gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Very simple implementation  only basic functionality  based on CSS and one line of JavaScript code   x000D   x000D   dropdown     position  relative    width  200px      dropdown select     width  100       dropdown  gt        box-sizing  border-box    height  1 5em      dropdown input     position  absolute    width  calc 100  - 20px     x000D   lt div class  dropdown  gt     lt input type  text    gt     lt select  onchange  this previousElementSibling value this value  this previousElementSibling focus    gt       lt option gt This is option 1 lt  option gt       lt option gt Option 2 lt  option gt     lt  select gt   lt  div gt  x000D   x000D   x000D   Please note  it uses previousElementSibling   which is not supported in older browsers  below IE9

User · Answer

ComboBox with TextBox  For Pre-defined Values as well as User-defined Values    ComboBox with TextBox  Click Here

User · Answer

The best way to do this is probably to use a third party library   There s an implementation of what you re looking for in jQuery UI jQuery UI and in dojo dojo  jQuery is more popular  but dojo allows you to declaratively define widgets in HTML  which sounds more like what you re looking for    Which one you use will depend on your style  but both are developed for cross browser work  and both will be updated more often than copy and paste code

[html] How can I create an editable dropdownlist in HTML?

Examples related to html

Examples related to combobox

Examples related to html-select