OurJS


OurJS-我们的JS, 我们的技术-IT文摘; 专注JS相关领域;
我们热爱编程, 我们热爱技术;我们是高大上, 有品味的码农;

欢迎您订阅我们的技术周刊


我们会向您分享我们精心收集整理的,最新的行业资讯,技术动态,外文翻译,热点文章;
我们使用第三方邮件列表向您推送,我们不保存您的任何个人资料,注重您的隐私,您可以随时退订,

欢迎分享您的观点,经验,技巧,心得

让我们一起找寻程序员的快乐,探索技术, 发现IT人生的乐趣;


本网站使用缓存技术每次加载仅需很小流量, 可在手机中流畅浏览;
如果您发现任何BUG,请即时告知我们: ourjs(at)ourjs.com

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


分享到
分类 JS学习   关键字 JavaScript   发布 ourjs  1517748155552
注意 转载须保留原文链接,译文链接,作者译者等信息。  
普通的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
社区评论 ( Beta版 )
OnceDoc 您自己的企业内容管理系统——文档、流程、知识库、报表、网盘All In One

访问404页面,寻找丢失儿童
 热门文章 - 分享最多
  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配置文件分段下载功能实现
  11. AirJD-简单好用的免费建站工具

 相关阅读 - JS学习
  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盘/移动硬盘插拔事件和发送接数据

 关键字 - JavaScript
  1. 抛弃jQuery,深入原生的JavaScript
  2. JavaScript中NaN的秘密
  3. 用原生HTML5控件实现输入框自动提示(下拉列表补全)功能
  4. NativeScript的工作原理:用JavaScript调用原生API实现跨平台
  5. JavaScript数组从头开始的位置插入新元素或删除第一个元素
  6. 用jQuery创建一个可编辑的SELECT下拉控件(HTML/CSS)
  7. JSON序列化(stringify)对象时排除某些属性的两种方法
  8. 少年,不要滥用箭头函数啊:JS中lambda表达式的优缺点和使用场景
  9. 如何用CSS将select/option文本居中或居右对齐
  10. Node.JS中UDP打洞穿透内网路由,架设内网服务器技术详解及源码

 欢迎订阅 - 技术周刊

我们热爱编程, 我们热爱技术; 我们是高端, 大气, 上档次, 有品味, 时刻需要和国际接轨的码农; 欢迎您订阅我们的技术周刊; 您只需要在右上角输入您的邮箱即可; 我们注重您的隐私,您可以随时退订.
加入我们吧! 让我们一起找寻码农的快乐,探索技术, 发现IT人生的乐趣;


 关注我们

我们的微信公众号: ourjs-com
打开微信扫一扫即可关注我们:
IT文摘-程序员(码农)技术周刊

ourjs官方微信号