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 相关文章推荐
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
Apr 29 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
javascript中的变量是传值还是传址的?
Apr 19 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
JS过滤url参数特殊字符的实现方法
Dec 24 Javascript
JavaScript中使用Math.floor()方法对数字取整
Jun 15 Javascript
Java中Timer的用法详解
Oct 21 Javascript
AngularJS入门教程之双向绑定详解
Aug 18 Javascript
vue展示dicom文件医疗系统的实现代码
Aug 27 Javascript
从0到1构建vueSSR项目之路由的构建
Mar 07 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
详解小程序横屏方案对比
Jun 28 Javascript
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
微信支付开发教程(一)微信支付URL配置
2014/05/28 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
php str_getcsv把字符串解析为数组的实现方法
2017/04/05 PHP
浅谈PHP中pack、unpack的详细用法
2018/03/12 PHP
支持ie与FireFox的剪切板操作代码
2009/09/28 Javascript
基于JQuery的密码强度验证代码
2010/03/01 Javascript
jQuery - css() 方法示例详解
2014/01/16 Javascript
Javascript中的String对象详谈
2014/03/03 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
浅谈Javascript数组索引
2015/07/29 Javascript
JavaScript动态创建form表单并提交的实现方法
2015/12/10 Javascript
jQuery查看选中对象HTML代码的方法
2016/06/17 Javascript
Bootstrap表单布局
2016/07/19 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
纯js封装的ajax功能函数与用法示例
2018/05/14 Javascript
通过webpack引入第三方库的方法
2018/07/20 Javascript
Vue 指令实现按钮级别权限管理功能
2019/04/23 Javascript
[01:08:24]DOTA2-DPC中国联赛 正赛 RNG vs Phoenix BO3 第一场 2月5日
2021/03/11 DOTA
浅谈python中的__init__、__new__和__call__方法
2017/07/18 Python
使用Python通过win32 COM打开Excel并添加Sheet的方法
2018/05/02 Python
windows下安装Python的XlsxWriter模块方法
2018/05/03 Python
python 查找文件名包含指定字符串的方法
2018/06/05 Python
python开启摄像头以及深度学习实现目标检测方法
2018/08/03 Python
python检测文件夹变化,并拷贝有更新的文件到对应目录的方法
2018/10/17 Python
python和js交互调用的方法
2020/06/23 Python
Django怎么在admin后台注册数据库表
2020/11/14 Python
洛杉矶健身中心女性专用运动服饰品牌:Marika
2018/05/09 全球购物
平面网站制作专科生的自我评价分享
2013/12/11 职场文书
物控部经理职务说明书
2014/02/25 职场文书
中国梦演讲稿教师篇
2014/04/23 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
智慧人生:永远不需要向任何人解释你自己
2019/08/20 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL