js下拉框可修改html,用jQuery创建一个可编辑的SELECT下拉控件(HTML/CSS)

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

OPTION 1

OPTION 2

OPTION 3

OPTION 4

样式信息

.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