用jQuery创建一个可编辑的SELECT下拉控件(HTML/CSS)

普通的SELECT控件只能选择，不能编辑，这里可以用JS代码来实现这个功能。基本原理是在select控件上面添加一个input盖住，当select改变时自动更新input的值。

<div class="select-editor">
  <select>
    <option value="OPTION 1">OPTION 1</option>
    <option value="OPTION 2">OPTION 2</option>
    <option value="OPTION 3">OPTION 3</option>
    <option value="OPTION 4">OPTION 4</option>
  </select>
  <input type="text" name="host" value="" />
</div>

.select-editor {
    position: relative;
    height: 20px;
    overflow: hidden;
    border: solid 1px #ccc;
}

.select-editor select {
    position: absolute;
    top: 0px;
    left: 0px;
    border: none;
    width: 100%;
    margin: 0;
}

.select-editor input {
    position: absolute;
    top: 0px;
    left: 0px;
    border: none;
    width: 90%;
}

.select-editor select:focus,
.select-editor input:focus {
    outline:none;
}

.select-editor[disabled] input {
    background-color: rgb(235, 235, 228);
}

JS代码

$.fn.selectEditor = function() {
  return this.each(function() {
    var self      = this
    var $editor   = $(self)
    var $select   = $editor.find('select')
    var $input    = $editor.find('input')

    if ($input.size() < 1 || $select.size() < 1) {
      return
    }

    $select.on('change', function() {
      var self    = this
      var option  = self.options[self.selectedIndex]
      if (!option) {
        return
      }

      $input.val(option.value)
    })
  })
}

$('.select-editor').selectEditor()

完整源码；http://cn.oncedoc.com/editor-doc/code-view/read/demo/ourjs/css/editable-selector.html
示例地址：http://cn.oncedoc.com/file/view/demo/ourjs/css/editable-selector.html