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

2018-02-05 10:31:29来源:http://ourjs.com/detail/5a76ffbb3506837194998c19作者:OurJS人点击

分享

普通的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()


完整源码;/2014th7cj/d/file/p/20180205/editable-selector.htmlbr

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台