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

<div> <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" 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()


完整源码；
示例地址：