javascript实现的一个带下拉框功能的文本框


Posted in Javascript onMay 08, 2014

有时我们需要一个可选的下拉框来选取内容,但是但是又有可以自定义输入的需求。对于这种需求,大部分网站使用的都是一个下拉框和一个 input text ,并列或分行给出选择。那么,我们希望它看上去像一个可以输入也可以选择的下拉框,那该如何做呢?

其实我们可以通过 css position 定位及少许的 javascript 代码,模拟出来这种效果。

<!DOCTYPE html>
<html>
<head>
 <title>可编辑可选择的下拉框</title>
 <meta charset="utf-8">
 <style>
  .list-name-input{
   color: #333;
   font-family: tahoma, 'Microsoft YaHei', 'Segoe UI', Arial, 'Microsoft Yahei', Simsun, sans-serif;
   font-size: 15px;
   font-weight: bold;
   height: 50px;
   margin: 0px;
   padding: 0px;
   position: relative;
   width: 530px;
  }
  .list-name-for-select{
   border: 0;
   color: #555;
   height: 20px;
   lighting-color: rgb(255, 255, 255);
   line-height: 20px;
   margin:0 0 10px 0;
   outline-color: #555;
   outline-offset: 0px;
   outline-style: none;
   outline-width: 0px;
   padding: 4px 6px;
   position: absolute;
   top: 1px;
   left: 3px;
   vertical-align: middle;
   width: 486px;
  }
  .list-name-input-for-select:focus{
   border: 0;
   border-radius: 0;
  }
  .list-select{
   background-color: #FFF;
   border:1px #ccc solid;
   border-radius: 4px;
   color: #555;
   cursor: pointer;
   height: 30px;
   left: 0px;
   margin:0 0 10px 0;
   padding: 4px 6px;
   position: absolute;
   top: 0px;
   vertical-align: middle;
   white-space: pre;
   width: 530px;
  }
 </style>
</head>
<body>
 <div id="list-name-input" class="list-name-input">
     <select type="text" class="list-select" id="list-select">
         <option value="">
             新建
         </option>
         <option value="0">
             10-NGCFG-update-1000
         </option>
         <option value="1">
             11-NGCFG-update-1000
         </option>
         <option value="2">
             111
         </option>
         <option value="3">
             12-NGCFG-update-1000
         </option>
         <option value="4">
             13-NGCFG-update-1000
         </option>
         <option value="5">
             14-NGCFG-update-1000
         </option>
         <option value="6">
             15-NGCFG-update-1000
         </option>
         <option value="7">
             16-NGCFG-update-1000
         </option>
         <option value="8">
             17-NGCFG-update-1000
         </option>
         <option value="9">
             18-NGCFG-update-1257
         </option>
         <option value="10">
             2-NGCFG-update-100
         </option>
         <option value="11">
             3-NGCFG-update-150
         </option>
         <option value="12">
             4-NGCFG-update-200
         </option>
         <option value="13">
             5-NGCG-update-250
         </option>
         <option value="14">
             6-NGCFG-update-418
         </option>
         <option value="15">
             7-NGCFG-update-500
         </option>
         <option value="16">
             8-NGCFG-update-1000
         </option>
         <option value="17">
             9-NGCFG-update-1000
         </option>
         <option value="18">
             @ALL
         </option>
         <option value="19">
             @CNC-BJ-4
         </option>
         <option value="20">
             CNC-BJ--测试
         </option>
         <option value="21">
             test
         </option>
     </select>
     <input type="text" class="name item-width list-name-for-select" id="list-name-for-select">
 </div>
 <script>
  var listName = document.getElementById('list-name-for-select');
  var listSelect = document.getElementById('list-select').onchange = function(e){
   console.log(this)
   if(this.value){
    listName.value = this.value + ' | ' + this.options[this.selectedIndex].text;
   }else{
    listName.value = ''
   }
  };
 </script>
</body>
</html>
Javascript 相关文章推荐
日期函数扩展类Ver0.1.1
Sep 07 Javascript
jquery 选择器引擎sizzle浅析
Feb 06 Javascript
正则表达式中特殊符号及正则表达式的几种方法总结(replace,test,search)
Nov 26 Javascript
JavaScript组件焦点与页内锚点间传值的方法
Feb 02 Javascript
jQuery操作JSON的CRUD用法实例
Feb 25 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
jQuery插件HighCharts绘制2D半圆环图效果示例【附demo源码下载】
Mar 09 Javascript
vue监听键盘事件的快捷方法【推荐】
Jul 11 Javascript
Vue.js实现的计算器功能完整示例
Jul 11 Javascript
ES6基础之默认参数值
Feb 21 Javascript
js定时器出现第一次延迟的原因及解决方法
Jan 04 Javascript
详解vue之自行实现派发与广播(dispatch与broadcast)
Jan 19 Vue.js
javascript解析json数据的3种方式
May 08 #Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 #Javascript
JS获取随机数函数可自定义最小值最大值
May 08 #Javascript
js数组操作常用方法
May 08 #Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 #Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
May 08 #Javascript
javascript操作excel生成报表示例
May 08 #Javascript
You might like
PHP源码之explode使用说明
2011/08/05 PHP
php unicode编码和字符串互转的方法
2020/08/12 PHP
JS getMonth()日期函数的值域是0-11
2010/02/15 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
购物车选中得到价格实现示例
2014/01/26 Javascript
JS实现同时搜索百度和必应的方法
2015/01/27 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
2015/05/18 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
JavaScript实现自动弹出窗口并自动关闭窗口的方法
2015/08/06 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
JavaScript中return用法示例
2016/11/29 Javascript
vue父子组件的数据传递示例
2017/03/07 Javascript
使用ionic播放轮询广告的实现方法(必看)
2017/04/24 Javascript
详解node单线程实现高并发原理与node异步I/O
2017/09/21 Javascript
js实现登录注册框手机号和验证码校验(前端部分)
2017/09/28 Javascript
layui实现动态和静态分页
2018/04/28 Javascript
vue动态子组件的两种实现方式
2019/09/01 Javascript
JavaScript自定义超时API代码实例
2020/04/30 Javascript
详解vue父子组件状态同步的最佳方式
2020/09/10 Javascript
[48:28]完美世界DOTA2联赛循环赛FTD vs Magma第二场 10月30日
2020/10/31 DOTA
python读写文件操作示例程序
2013/12/02 Python
python win32 简单操作方法
2017/05/25 Python
python 异步async库的使用说明
2020/05/04 Python
css3个性化字体_动力节点Java学院整理
2017/07/12 HTML / CSS
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
中专自荐信
2013/10/13 职场文书
九年级科学教学反思
2014/01/29 职场文书
班组建设经验交流材料
2014/05/12 职场文书
党的群众路线教育实践活动个人对照检查材料
2014/09/22 职场文书
法学专业大学生实习自我鉴定
2014/10/05 职场文书
标准离婚协议书范文下载
2014/11/30 职场文书
2015年国际护士节演讲稿
2015/03/18 职场文书
少先大队干部竞选稿
2015/11/20 职场文书
高中议论文(范文2篇)
2019/08/19 职场文书
pycharm无法导入lxml的解决办法
2021/03/31 Python