Editable Select element

Question

I would like to have a select element in the form but besides the options in the dropdown  it would be useful to be able to edit it and add new option but not with another input text  I need all in once  Is it possible

User · Answer

Similar to answer above but without the absolute positioning:

<select style="width: 200px; float: left;" onchange="this.nextElementSibling.value=this.value">
    <option></option>
    <option>1</option>
    <option>2</option>
    <option>3</option> 
</select>
<input style="width: 185px; margin-left: -199px; margin-top: 1px; border: none; float: left;"/>

So create a input box and put it over the top of the combobox

User · Answer

Nothing is impossible  Here s a solution that simply sets the value of a text input whenever the value of the  lt select gt  changes  rendering has been tested on Firefox and Google Chrome     x000D   x000D   select-editable  position relative  background-color white  border solid grey 1px   width 120px  height 18px   x000D   select-editable select  position absolute  top 0px  left 0px  font-size 14px  border none  width 120px  margin 0   x000D   select-editable input  position absolute  top 0px  left 0px  width 100px  padding 1px  font-size 12px  border none   x000D   select-editable select focus   select-editable input focus  outline none   x000D   lt div class  select-editable  gt  x000D     lt select onchange  this nextElementSibling value this value  gt  x000D       lt option value    gt  lt  option gt  x000D       lt option value  115x175 mm  gt 115x175 mm lt  option gt  x000D       lt option value  120x160 mm  gt 120x160 mm lt  option gt  x000D       lt option value  120x287 mm  gt 120x287 mm lt  option gt  x000D     lt  select gt  x000D     lt input type  text  name  format  value     gt  x000D   lt  div gt  x000D   x000D   x000D   jsfiddle  https   jsfiddle net nwH8A    The next example adds the user input to the empty option slot of the  lt select gt   thanks to  TomerPeled   It also has a little bit more flexible variable CSS    x000D   x000D   select-editable  position relative  width 120px   x000D   select-editable  gt     position absolute  top 0  left 0  box-sizing border-box  outline none   x000D   select-editable select  width 100    x000D   select-editable input  width calc 100  - 20px   margin 1px  border none  text-overflow ellipsis   x000D   lt div class  select-editable  gt  x000D     lt select onchange  this nextElementSibling value this value  gt  x000D       lt option value    gt  lt  option gt  x000D       lt option value  115x175 mm  gt 115x175 mm lt  option gt  x000D       lt option value  120x160 mm  gt 120x160 mm lt  option gt  x000D       lt option value  120x287 mm  gt 120x287 mm lt  option gt  x000D     lt  select gt  x000D     lt input type  text  oninput  this previousElementSibling options 0  value this value  this previousElementSibling options 0  innerHTML this value  onchange  this previousElementSibling selectedIndex 0  value      gt  x000D   lt  div gt  x000D   x000D   x000D   jsfiddle  https   jsfiddle net pu7cndLv 1      DataList  In HTML5 you can also do this with the  lt input gt  list attribute and  lt datalist gt  element    x000D   x000D   lt input list  browsers  name  browser  gt  x000D   lt datalist id  browsers  gt  x000D     lt option value  Internet Explorer  gt  x000D     lt option value  Firefox  gt  x000D     lt option value  Chrome  gt  x000D     lt option value  Opera  gt  x000D     lt option value  Safari  gt  x000D   lt  datalist gt  x000D   click once to focus and edit  click again to see option dropdown  x000D   x000D   x000D   jsfiddle  https   jsfiddle net hrkxebtw   But this acts more like an auto-complete list  once you start typing  only the options that contain the typed string are left as suggestions  Depending on what you want to use it for  this may or may not be practical

User · Answer

x000D   x000D  A bit more universal  lt select name  env  style  width  200px  position absolute   onchange  this nextElementSibling value this value  gt  x000D       lt option gt  lt  option gt  x000D       lt option gt 1 lt  option gt  x000D       lt option gt 2 lt  option gt  x000D       lt option gt 3 lt  option gt   x000D   lt  select gt  x000D   lt input style  width  178px  margin-top  1px  border  none  position relative  left 1px  margin-right  25px   value  123456789012345678901234   gt layout     x000D   x000D   x000D

User · Answer

Thanks to  Arraxas s anwser  I customized the arrow and make the input element auto-adaptive to the select element  and it looks good on Chrome  Firefox of my Android mobile phone  set color transparent for select and some color for option to hide text display of the select because the input and  combobox div after cannot completely cover select    x000D   x000D     https   stackoverflow com questions 13694271 modify-select-so-only-the-first-one-is-gray 41941056 41941056 select option first-child      combobox select   combobox select option   color   000000     combobox select invalid   combobox select option value       color grey      combobox  position absolute  left 80px  top 6px    combobox gt div   position relative  font-size 1em     combobox select       font-size inherit  color transparent      padding 0  -moz-appearance none  -webkit-appearance none  appearance none      border 1px solid blueviolet     combobox input       position absolute top 1px left 0px  text-overflow ellipsis      box-sizing border-box  padding 0px  margin 0px  height calc 100  - 1px   width calc 100  - 20px       border 1px solid blueviolet  border-right none  border-top none     combobox gt div after      position absolute  top 0px  right 0px  height 100   width 20px      box-sizing border-box  content      border 1px solid blueviolet  pointer-events none      display flex  flex-direction row  align-items center  justify-content center     combobox select focus   combobox input focus  outline none   x000D   lt  -- mandatory benefits social security welfare -- gt   lt div class  combobox  gt  lt div gt       lt select id MandatoryBenefits onchange  this nextElementSibling value this value  required gt           lt option value    selected gt Select     lt  option gt           lt option value  Pension  gt Pension   lt  option gt           lt option value  Medical  gt Medical   lt  option gt           lt option value  Unemployment  gt Unemployment   lt  option gt           lt option value  Injury  gt Injury   lt  option gt           lt option value  Maternity  gt Maternity   lt  option gt           lt option value  Serious Illness  gt Serious Illness   lt  option gt           lt option value  Housing Fund  gt Housing Fund   lt  option gt       lt  select gt       lt input type  text  value    onchange  this previousElementSibling selectedIndex 0          oninput  this previousElementSibling options 0  value this value  this previousElementSibling options 0  innerHTML this value    gt   lt  div gt  lt  div gt  x000D   x000D   x000D   online demo   jsbin

User · Answer

Another sort of workaround might be    Use the HTML   lt input type  quot text quot  id  quot myselect quot   gt   lt datalist id  quot myselect quot  gt   lt option gt option 1 lt  option gt   lt option gt option 2 lt  option gt   lt option gt option 3 lt  option gt   lt option gt option 4 lt  option gt   lt  datalist gt   In Firefox at least a focus followed by a click drops down the list of known valid values as the  lt datalist gt  elements IFF the field happens to be empty   Otherwise  one must clear the field to see valid choices as one types in data   A new value is accepted as typed   One must handle new values in JS or other to persist them  This is not perfect  but it suffices for my minimalist needs  so I thought I would share

User · Answer

Based on the other answers  here is a first draft for usage with knockout   Usage         lt div data-bind  editableSelect   options  optionsObservable  value  nameObservable   gt  lt  div gt    Knockout data binding  composition addBindingHandler  editableSelect           init  function hostElement  valueAccessor           var optionsObservable   getOptionsObservable          var valueObservable   getValueObservable           var  editableSelect     hostElement          editableSelect addClass  select-editable           var editableSelect    editableSelect 0          var viewModel   new editableSelectViewModel optionsObservable  valueObservable         ko applyBindingsToNode editableSelect    compose  viewModel              tell knockout to not apply bindings twice       return   controlsDescendantBindings  true           function getOptionsObservable             var accessor   valueAccessor            return getAttribute accessor   options                   function getValueObservable             var accessor   valueAccessor            return getAttribute accessor   value                          View   lt select   data-bind  options  options  event   focus  resetComboBoxValue  change  setTextFieldValue      id  comboBox     gt  lt  select gt   lt input   data-bind  value  value    event   focus  textFieldGotFocus  focusout  textFieldLostFocus     id  textField    type  text   gt    ViewModel  define      lodash      services errorHandler     function         errorhandler        var viewModel   function optionsObservable  valueObservable         var self   this      self options   optionsObservable        self value   valueObservable      self resetComboBoxValue   resetComboBoxValue      self setTextFieldValue   setTextFieldValue      self textFieldGotFocus   textFieldGotFocus      self textFieldLostFocus   textFieldLostFocus       function resetComboBoxValue               comboBox   val null              function setTextFieldValue           var selection       comboBox   val          self value selection              function textFieldGotFocus               comboBox   addClass  select-editable-input-focus                function textFieldLostFocus               comboBox   removeClass  select-editable-input-focus                  errorhandler includeIn viewModel      return viewModel        CSS   select-editable      display  block    width  100     height  31px    padding  6px 12px    font-size  12px    line-height  1 42857143    color   555555    background-color   ffffff    background-image  none    border  1px solid  cccccc    border-radius  0px    -webkit-box-shadow  inset 0 1px 1px rgba 0  0  0  0 075     box-shadow  inset 0 1px 1px rgba 0  0  0  0 075     -webkit-transition  border-color ease-in-out  15s  -webkit-box-shadow ease-in-out  15s    -o-transition  border-color ease-in-out  15s  box-shadow ease-in-out  15s    transition  border-color ease-in-out  15s  box-shadow ease-in-out  15s padding  0       select-editable select     outline 0    padding-left  10px    border none    width 100     height  29px       select-editable input     outline 0    position  relative    top  -27px    margin-left  10px    width 90     height  25px    border none      select-editable select focus     outline 0    border  1px solid  66afe9    -webkit-box-shadow  inset 0 1px 1px rgba 0 0 0  075   0 0 8px rgba 102  175  233  0 6     box-shadow  inset 0 1px 1px rgba 0 0 0  075   0 0 8px rgba 102  175  233  0 6          select-editable input focus     outline 0      select-editable-input-focus   outline 0    border  1px solid  66afe9  important    -webkit-box-shadow  inset 0 1px 1px rgba 0 0 0  075   0 0 8px rgba 102  175  233  0 6     box-shadow  inset 0 1px 1px rgba 0 0 0  075   0 0 8px rgba 102  175  233  0 6

[html] Editable 'Select' element

Examples related to html

Examples related to html-select