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


发布者 ourjs  发布时间 1517748155552
关键字 JS学习  JavaScript 
普通的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








 热门文章 - 分享最多
  1. 移动端开发框架哪个好?jQuery/Vue/AngularJS有哪些区别和优缺点?
  2. Node.JS中UDP打洞穿透内网路由,架设内网服务器技术详解及源码
  3. 比特币最近为何会暴跌?大资金如何靠做空比特币获利
  4. 红衣教主周鸿祎会不会成为中国首富
  5. 马化腾创办腾讯的第一桶金是怎么来的:炒股10万炒到70万
  6. node.js用fs.rename强制重命名或移动文件夹
  7. 如何为OnceAir顽石个人私有云盘设置固定公网访问地址
  8. Node.JS如何查看本地MAC/IP地址、计算cpu使用率和内存容量
  9. JavaScript数组从头开始的位置插入新元素或删除第一个元素
  10. Node.JS段点续传:Nginx配置文件分段下载功能实现

 相关阅读
  1. 如何用Bootstrap免费网站模板和OnceAir云盘搭建个人网站服务器
  2. Node.JS高效压缩解压zip文件:将child_process执行结果输入stdout流
  3. Node.JS段点续传:Nginx配置文件分段下载功能实现
  4. Node.JS如何查看本地MAC/IP地址、计算cpu使用率和内存容量
  5. JavaScript数组从头开始的位置插入新元素或删除第一个元素
  6. Node.JS中UDP打洞穿透内网路由,架设内网服务器技术详解及源码
  7. 移动端开发框架哪个好?jQuery/Vue/AngularJS有哪些区别和优缺点?
  8. Node.JS 8.x和9.x新特性:N-API,NPM5,ERROR CODE
  9. Node.JS读取中文TXT编码文件显示乱码问题解决方案
  10. Node.JS与USB接口通信:检测U盘/移动硬盘插拔事件和发送接数据

  开源的 OurJS
OurJS开源博客已经迁移到 OnceOA 平台。

  关注我们
扫一扫即可关注我们:
OnceJS

OnceOA